vue数据绑定原理

vue

Vue是采用数据劫持配合发布者-订阅者模式，通过Object.defineProperty（）来劫持各个属性的getter和setter，在数据发生变化的时候，发布消息给依赖手机器，去通知观察者，作出对应的回调函数去更新世图。MVVM作为绑定的入口，整合Observe,Compil和Watcher三者，通过Observe来监听model的变化
通过Compil来解析编译模版指令，最终利用Watcher搭起Observe和Compil之前的通信桥梁
从而达到数据变化 => 更新视图，视图交互变化(input) => 数据model变更的双向绑定效果

vue数据绑定

数据变化更新视图，视图变化更新数据

输入框内容变化，data中的数据同步变化view=》model
data中的数据变化，文本节点的内容同步变化 model =》view
设计思想：发布者、观察者模式

响应式处理整体过程为initState() => initData() => observe()，其中observe是响应式处理的入口，通过该方法为data对象转化为响应式对象，observe方法接收的是对象且该对象不是响应式时，会为该对象创建一个observe对象，会调用Observer类，Observer类中判断该value是数组还是对象，进行不同的处理

• 数组的响应化处理，是重写push,pop,sort等会修改原数组的方法，调用对应的notify.然后遍历数组中的成员，判断其类型决定是否调用observe方法
• 对象的响应化处理，会调用walk方法，遍历对象中的每个属性，调用defineReactive，
• defineReactive的核心是为每一个属性定义getter和setter,getter中收集依赖，setter中派发更新,即调用dep.notify。 dep.notify()会调用watcher的update()方法。如果该watcher未被处理，会被添加到queue队列中，并调用flushSchedulerQueue()方法，
  该方法会触发对应的钩子函数以及调用watcher.run()更新视图。