Vue双向绑定

依赖订阅：

1.首先将vue实例中的data数据挂载到vue实例上，本质是让vue实例代理data中的数据

2.将data数据加入Observer中做数据侦听:

Observer定义了的钩子可以拦截侦听到data数据的变化：

getter，当获取vue实例中挂载的data数据时，就会触发getter，在getter中将数据加入消息订阅

setter，当改变vue实例中挂载的data数据时，就会触发setter，一旦setter监听到值的变化，就发起消息通知

内部维护了一个Dep，负责依赖收集，收集Watcher

3.编译模板，主要是指令及文本

处理文本主要用插值法，对DOM节点上的vue模板语言使用插值替换

具体做法，

遍历virtual DOM上对应的所有DOM节点，

通过正则匹配找出DOM上vue模板映射的data数据变量，

在vue实例挂载的data数据中映射出所对应的具体值，将该数据插入到文档片段中

if (this.el) {

this.fragment = this.nodeToFragment(this.el); //将vue需要挂载的DOM节点添加到文档碎片中

this.compileElement(this.fragment); //在文档碎片中编译vue模板，通过插值替换将真实的vue数据挂载到DOM上

this.el.appendChild(this.fragment); //将处理好的文档碎片添加到DOM上

} else {

console.log('Dom元素不存在');

}

编译处理数据时将会回调创建Watcher，Watcher创建时会将自己加入依赖（依赖收集）

处理指令时，判断是事件指令还是v-model指令分别处理

总的来说就是：Observer⇌Watcher⇌Compile

Watcher更新->回调Compile->Compile回调->创建Watcher

Observer更新->依赖收集推送通知到Watcher->Watcher更新->Observer数据劫持触发更新