321 字
2 分钟
Vue 双向绑定
简单写点，之后补细节
Vue 如何实现双向绑定
简单来说就是 数据劫持和发布订阅者模式
Observer (观察者)
- 给 data 函数所有对象添加 get 和 set 方法
- get：提供属性值的获取。每个属性如果第一次调用 get 方法，就给当前属性添加一个消息订阅器。
- set：当监听到值有改变，让消息订阅器通知 watcher(订阅者)更新页面
Compiler (消息解析器)
- 扫描根节点下的所有元素，找到每个节点上的指令并解析。
- 如 input 标签有个 v-model，首先通过 vm 实例把属性名相同的值，赋给它，之后添加监听事件，触发后把标签上的值赋值给对应的属性名
- 如双大括号
{{}}，就给这个属性添加一个 wacher，在接收到消息订阅器的消息后调用 update 方法更新值。
Dep(消息订阅器)
- 负责发布订阅
- 把订阅者放入数组中，每当 notify 被调用 Obs 的 set 改变时触发，会通知 watcher 订阅者更新视图。
Watcher(订阅者)
- 在消息订阅器上订阅每个属性的变化，在属性变化后触发 update 方法，从而改变视图。