共计 955 个字符，预计需要花费 3 分钟才能阅读完成。
- 双向数据绑定为 vue2 核心技术并且比较复杂，这里讲述下实现过程及简略源码
- 在创立 vue 实例的时候 vue 做了三件事
- 属性监听(Observe)
- 属性代理(Obagent)
- 末班编译(Compile)
- Observe: 为 vue date 上的属性增加 get，set 办法(通过递归调用 Object.defineProperty)
- 注：此时每个 vue 实例上的属性被拜访或批改都会触发身上的 getset 办法，此为 vue 的数据劫持
- Obagent：通过 Object.defineProperty 来监听间接拜访和设置 vm 上的对象此时去拜访或设置 vm data 上的对象
- 注：Obagent 只须要劫持顶层 data 上的数据
Compile：
- 考录到循环渲染耗费性能 vue 采取文档碎片的形式编译模板
注：文档碎片争议比拟大 新版非 ie 文档碎片的性能没问题，思考到这一点自己倡议应用模板字符串拼接的形式，在这里兼容了 ie - 获取 vue 实例根节点(#app), 挂在到 vue 实例上，通过递归的形式将根节点上所有子节点增加到文档碎片中(创立个空的文档碎片够细了吧)
- 在递归增加文档碎片的过程中将 vue data 上的值替换掉{{}}, 和 v -model 的值
- 最初将文档碎片增加到根节点中
此时实现了 vue 对实例上数据的渲染
- vue 存在两个类 别离是 收集订阅者 (Dep) 和公布订阅者(Watcher)
- Dep：存储这所有的订阅者(watcher) 一个长期的 target 和 增加 wacher/ 更新调用 watcher 的办法
- watcher：属性有 vue 实例 key 回调函数 和一个更新本人的办法
收集所有的 watcher
- 在模板编译的时，在每次 dom 与 vue 实例 data 上数据的响应 都会创立个 watcher
- 在每次创立 watcher 的时候，watcher 指向 Dep 的 target 而后通过触发 get 办法将 watcher 增加到 sub 汇合中（触发 get 办法 vue 采纳一种取巧的形式，在每次创立 watcher 会携带个 key, 通过 reduce 万金油的办法去链式拜访这个值触发 get 办法，失去想要的后果在把 dep 上的 target 清空）
- 在页面数据批改的时候（set 被触发时）调用 dep 的 notify 区循环调用 watcher 上的 update(update 的回调会承受一个 newValue，通过更新 node 节点达到双向绑定的成果)
正文完