vue双向绑定的原理（响应式+组件渲染和更新过程）

vue双向绑定的原理（响应式+组件渲染和更新过程）

1. 首先vue是MVVM模型，把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了
2. 双向绑定在vue可以通过v-modal实现
3. view改变，modal里面data会发生改变，可以通过事件监听即可，比如v-modal的本质就是通过input标签里面的input事件改变value，此时data改变，触发re-render函数
4. 什么是re-render函数呢，首先在组件初次渲染的时候，模板会被编译成render函数，触发响应式ObjectdefineProperty，监听data的setter和getter属性，然后执行render函数，生成虚拟dom树（vnode），通过diff算法patch函数，进行对比渲染。当data发生改变的时候，触发setter，要watcher判断这个data是不是之前监听的，若是，则触发re-render（）生成一个新的vnode然后执行patch，进行对比渲染。
5. 总体来说 vue.js是采用数据劫持结合发布者-订阅者的模式的方式，通过ObjectdefineProperty来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调。