Vue源码分析之数据绑定Dep与Watcher的关系

数据绑定

• 数据绑定

1. 一旦更新了data中的某个属性数据，所有界面上直接（this.xxx='aaa'）或间接（计算属性或方法）使用了此属性的节点都会更新

• 数据劫持

1. 数据劫持是vue中用来实现数据绑定的一种技术
2. 基本思想：通过defineProperty()来监视data中所有属性（任意层次）数据的变化，一旦变更就去更新界面

Dep与Watcher的关系

1. Dep何时创建？—— 初始化时给data的属性进行数据劫持时创建的
2. 有几个？—— 与data中的属性一一对应
3. 结构是什么？—— id：标识，subs：[]相关的n个watcher容器

 

1. Watcher何时创建？—— 初始化时解析大括号表达式/一般指令时创建
2. 有几个？—— 与模板表达式（不包含事件指令）一一对应
3. 结构是什么？

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

• 当执行vm.name='ab