vue 双向数据绑定原理

vue双向数据绑定采用数据劫持结合系统-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter和getter，在数据变动的时候发布给订阅者，触发相对应的监听回调。

vue数据双向绑定有4个点，分别是observe（哦不事儿呜：观察：数据监听器）、compile（康派哦：编译；指令解析器），watcher（我吃儿：观察者：桥梁），mvvm入口函数。

observe数据监听器对数据对象进行监听，如果数据有变动，会第一时间拿到最新值并通知订阅者。
compile指令解析器对每一个元素进行扫描和解析，根据指令模板替换数据，以及绑定相对应的更新函数。
watcher是连接observe和compile的桥梁能够订阅并收到每个属性的变动通知，执行指令绑定相对应的回调函数，从而更新视图。

具体步骤分为：
1observe会对所有对象进行遍历，都加上getter和setter，这样给对象赋值的时候就会触发setter，这样就可以监听数据的变化。

2compile会解析模板指令，将模板的变量第一时间变成熟数据，然后初始化页面视图，并将每个指令对应的节点更新新函数，一旦数据有变动，收到通知之后立刻更新视图。

3watcher自身实例化的时候把自己添加到dep，然后指令解析器通过update（）方法初始化视图，待变动属性通过dep.notify（）通知调用update（）方法并处罚回调。

4mvvm作为数据绑定的入口整个以上三者通过observe监听自己model数据变化，利用桥梁通讯达到数据变化，视图更新，视图交互input，数据model变更的双向绑定效果。