vue源码分析（3） vue源码分析（3）

【vue源码分析（3）】记录之...

数据绑定：一旦data中的某个属性数据更新，所有界面上直接使用或者间接使用此属性的节点就都会更新。
数据劫持：是vue中用来实现是数据绑定的一种技术
基本思想：通过defineProperty()来监视data中所有属性（任意层次）数据的变化，一旦变化就去更新界面。
observer：劫持监听所有属性。
dep：

实例：在初始化给data的属性进行数据劫持时创建的。

个数：与data中的属性一一对应。

结构：id的标识符；sub：n个相关的watcher的容器。

watcher：

实例：在初始化的解析大括号表达式/一般指令时创建。

个数：与模板表达式（不包含事件指令）一一对应。

watcher的结构如下：

this.cb = cb; //用于更新界面的回调 this.vm = vm; //vm this.exp = exp; //对应的表达式 this.depIds = { }; //相关的n个dep的容器对象 this.value = https://www.it610.com/article/this.get(); //当前表达式对应的value

Dep与Watcher之间的关系

关系：多对多的关系
data属性==>Dep ==> n个watcher（模板中有多个表达式使用了此属性）。
表达式==>Watcher==>n个Dep（多层表达式a.b.c）。

如何建立的：vm.name = 'abc' -==> data中的name属性值变化 ==> name的set()调用 ==> dep ==> 相关的所有watcher==>cb() ==> updater