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