Vue响应式本质和原理

首先，要理解什么是响应式。即针对的是数据和页面同步刷新，数据更新同步页面，页面更新也会同步数据/data（这就是vue的双向数据绑定，即MVVM模式）。

其次，实现原理是：Vue内部的Object.defineProperty()方法把数据/data设置为getter和setter的访问形式，当数据被修改时在setter方法设置监视修改页面信息进行同步，也就是说只要数据被修改，就会触发对应的set方法，由set方法去调用操作dom的方法。Vue的响应式本质是利用动态绑定表单元素value属性与实现input事件的监听。

最后，vue实现数据响应式，是通过数据劫持侦测数据变化，发布订阅者模式进行依赖收集与视图更新，即Observe，Watcher和Compile三者需要相互配合，具体如下：

Observe实现数据劫持，递归给对象属性，绑定setter和getter函数，属性改变时，通知订阅者
Compile解析模板，把模板中变量换成数据，绑定更新函数，添加订阅者，收到通知就执行更新函数
Watcher作为Observe和Compile中间的桥梁，订阅Observe属性变化的消息，触发Compile更新函数

响应式过程解析如下：