vue源码分析（3）

记录之...

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

1. 实例：在初始化给data的属性进行数据劫持时创建的。
2. 个数：与data中的属性一 一对应。
3. 结构：id的标识符；sub：n个相关的watcher的容器。

• watcher：

1. 实例：在初始化的解析大括号表达式/一般指令时创建。
2. 个数：与模板表达式（不包含事件指令）一 一对应。
3. watcher的结构如下：

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

• Dep与Watcher之间的关系

1. 关系：多对多的关系
   data属性==>Dep ==> n个watcher（模板中有多个表达式使用了此属性）。
   表达式==>Watcher==>n个Dep（多层表达式a.b.c）。
2. 如何建立的：vm.name = 'abc' -==> data中的name属性值变化 ==> name的set()调用 ==> dep ==> 相关的所有watcher==>cb() ==> updater

MVVM结构图.png

• 双向数据绑定

1. 双向数据绑定是建立在单项数据绑定（model==>View）的基础上的。
2. 双向数据绑定的实现流程：
   a. 在解析v-model指令时，给当前元素添加input监听。
   b. 当input的value发生改变时，讲最新的值赋值给当前表达式所对应的data属性。