Vue响应式原理

  不要认为数据发生改变,界面跟着更新是理所当然.

具体代码实现:https://gitee.com/ahaMOMO/Vue-Responsive-Principle.git

看下图:

例子如下:

显示哈哈哈,但是当我们改变message时,也会相应改变

加了几个message之后,页面也相应得到变化

 问题来了:

(1)app.message修改数据,Vue内部是如何监听message数据?

*Object.defineProperty-->监听对象属性的改变

当你的obj中的name发生改变之后:

obj.name="kobe"时,在set方法中监听name的改变

(2)当数据发生改变,Vue是如何知道要通知哪些人,界面发生刷新?

*发布订阅者设计模式

监听name改变后,要告诉谁?谁用就告诉谁,谁在用?

给每个使用的定义一个名字,谁用一次就会调用一次get方法,所以就知道谁在使用

定义依赖类

subs属性装的是watcher中的所有订阅者

定义订阅者

在get方法中,创建watcher(因为谁在使用get谁就是订阅者的一员)

const dep = new Dep();

const w1 = new Watcher('张三');

dep.addSub(w1);//添加订阅者

const w2 = new Watcher('李四');

dep.addSub(w2);//添加订阅者

在set方法中,调用dep中的notify方法

dep.notify();//通知所有的订阅者

在obj中的每个属性都会创建一个dep对象

使用图解分析过程如下:

具体代码实现:https://gitee.com/ahaMOMO/Vue-Responsive-Principle.git

Vue的响应式原理---(v-model中的双向绑定原理)的更多相关文章

  1. vue的双向绑定原理浅析与简单实现

    很久之前看过vue的一些原理,对其中的双向绑定原理也有一定程度上的了解,只是最近才在项目上使用vue,这才决定好好了解下vue的实现原理,因此这里对vue的双向绑定原理进行浅析,并做一个简单的实现. ...

  2. Vue的响应式原理

    Vue的响应式原理 一.响应式的底层实现 1.Vue与MVVM Vue是一个 MVVM框架,其各层的对应关系如下 View层:在Vue中是绑定dom对象的HTML ViewModel层:在Vue中是实 ...

  3. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  4. vue深入响应式原理

    vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...

  5. Vue 数据响应式原理

    Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...

  6. 一探 Vue 数据响应式原理

    一探 Vue 数据响应式原理 本文写于 2020 年 8 月 5 日 相信在很多新人第一次使用 Vue 这种框架的时候,就会被其修改数据便自动更新视图的操作所震撼. Vue 的文档中也这么写道: Vu ...

  7. 深入解析vue.js响应式原理与实现

    vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...

  8. vue系列---响应式原理实现及Observer源码解析(一)

    _ 阅读目录 一. 什么是响应式? 二:如何侦测数据的变化? 2.1 Object.defineProperty() 侦测对象属性值变化 2.2 如何侦测数组的索引值的变化 2.3 如何监听数组内容的 ...

  9. vue基础响应式数据

    1.vue 采用 v……vm……m,模式,v---->el,vm---->new Vue(实例),m---->data 数据,让前端从操作大量的dom元素中解放出来. 2.vue响应 ...

随机推荐

  1. ElementUI的Table表格添加自定义头CheckBox多选框

    在ElmentUI的Table表格组件中,也许你会使用type为selection值的多选框功能,但是此时设置的label属性不生效,不能设置标题名称:有时候我们的需求就是要添加标题名称,那该如何处理 ...

  2. Pandas 中对列 groupby 后进行 sum() 与 count() 区别及 agg() 的使用方法

    groupby[根据哪一列][ 对于那一列].进行计算 代码演示: direction:房子朝向 view_num:看房人数 floor:楼层 计算: A 看房人数最多的朝向 df.groupby([ ...

  3. POJ2226(二分图建图/最小点覆盖)

    题意: 给定m*n的棋盘,有若干只咕咕.希望去掉一部分咕咕使得剩下的咕咕在上下左右四个方向越过咕咕槽的情况下都看不到咕咕. 思路: 建立一个二分图的方法有很多,这里采用xy二分. 假设没有咕咕槽的情况 ...

  4. MySql快速入门(四)

    在之前我们对MySql已经有了基本的了解,接下来我们就来接触MySql的分库分表,请往下阅读: 分库分表之MyCat实现 分库分表介绍: 随着微服务这种架构的兴起,我们应用从一个完整的大的应用,切分为 ...

  5. linux基础之CentOS启动流程

    一.基本概念 内核设计流派: 单内核设计:Linux //所有功能集成于同一个程序 微内核设计:Windows,Solaris //每种功能使用一个单独子系统实现 Linux内核特点: 支持模块化:. ...

  6. yarn 不要一起用 npm

    yarn 不要一起用 npm 如果一起用,看下lock 的版本一样不,不一样可能会出现问题

  7. UVA12124 | Assemble (二分)

    原题 题目大意:给出你的预算和各类待选硬件来组装计算,同种类的硬件只需且必须选购一种,在保证预算足够的情况下求出最优的合计硬件质量. 根据木桶原理,合计硬件质量 = 所选购硬件中数值最低质量的硬件质量 ...

  8. CSRF漏洞原理

    跨站脚本伪造 用户与服务器端已进行了身份认证,站点已经对用户生成的session,完全信任了,然后此时黑客通过社工发过来一个不友好的链接, 让用户点击请求此站点,站点完全信任这个请求,按照黑客的这个请 ...

  9. XSS漏洞原理

    注入型漏洞的本质都是服务端分不清用户输入的内容是数据还是指令代码,从而造成用户输入恶意代码传到服务端执行. 00x01js执行 Js是浏览器执行的前端语言,用户在存在xss漏洞的站点url后者能输入数 ...

  10. [APIO2010] 回文串 - 回文自动机

    经典题吧 我觉得我要换个板子,这结构体板子真TM不顺手 #include <bits/stdc++.h> using namespace std; const int N = 2e6 + ...