vue学习篇8之数据绑定（Watcher和Dep）

数据绑定
一旦更新了data中的某个属性数据，所有界面上直接使用或间接使用了此属性的节点都会更新。

数据劫持
在Vue中是使用数据劫持的技术来实现数据绑定的效果。
基本思想：通过definePropety()来监视data中所有属性（任意层次）数据的变化，一旦变化就去更新界面。（给data中的属性提供set方法）

Dep

• 它的实例什么时候创建？
  初始化的给data的属性进行数据劫持（给data的属性进行响应式）时创建的。
• 创建个数？
  与data中的属性一一对应。
• Dep的结构？
  id：标识
  subs:[] n个相关的watcher的容器

Watcher

• 它的实例什么时候创建？
  初始化的解析大括号表达式/一般指令时创建。
• 创建个数？
  与模板中表达式（不包含事件指令）一一对应。
• Watcher的结构？
  this.cb = cb //用于更新界面的回调
  this.vm = vm //vm实例
  this.exp = exp //对应的表达式
  this.depIds = {} //相关的n个dep的容器对象
  this.value = this.get() //当前表达式对应的value

Dep与Watcher之间的关系

• 什么关系？
  多对多的关系
  比如：
  一个data里的属性 ==》对应一个Dep ==》对应n个watcher（什么时候n是大于1的？模板中有多个表达式使用了此属性。比如：{{a}}/v-text='a'）
  一个表达式 ==》对应一个watcher ==》对应n个Dep（多层表达式会产生多个Dep）。比如{{a.b.c}}在模板中只用了一次 ==》对应一个watcher ==》对应了3个Dep
• 如何建立的？
  data中属性的get()中建立
• 什么时候建立？
  初始化的解析模板中的表达式时创建watcher对象。Dep先创建watcher后创建

例如：
vm.name = 'abc' ==> data中的name属性值变化 ==> name的set()就会调用 ==> 通知dep ==> 通知dep中subs中所有相关的watcher ==>调用watcher中的更新界面的回调函数cb ==>updater