Vue的响应原理-M

Vue的响应原理

数据发生变化后，会重新渲染页面从而更新视图，这就是Vue响应式。Vue实现数据响应式，是通过数据劫持结合发布订阅者模式来实现的。数据被获取或者修改的时候，会触发监听者对应的回调函数，进行一些逻辑处理。vue2.0用Object.defineProperty()方法，监听的是对象某个属性的获取修改。Vue3.0用的是proxy反向代理，监听的是整个对象属性的修改。
Object.defineProperty()具体怎么监听的：
首先我们需要通过Object.defineProperty()方法把数据(data)设置为getter和setter的访问形式，这样我们就可以在数据被修改时在setter方法设置监视修改页面信息，也就是说每当数据被修改，就会触发对应的set方法，然后我们可以在set方法中去调用操作dom的方法。​ 此外，如果页面有input用v-model绑定数据，我们需要在这种绑定了data的input元素上，添加input事件监听，每当input事件被触发时，就修改对应的data。
vue实现数据响应式，是通过数据劫持侦测数据变化，发布订阅模式进行依赖收集与视图更新。