Vue2与Vue3的响应式原理

阅读目录

1. 理解Vue2的响应式原理
2. 理解Vue3响应式原理

 

---

回到顶部

理解Vue2的响应式原理

　　Vue2是通过Object.defineProperty()来拦截数据，将数据转换成getter/setter的形式，在访问数据时调用getter函数，在修改数据时调用setter函数。然后利用发布-订阅模式，在数据变动时触发依赖，也即发布更新给订阅者，订阅者收到消息后进行相应的处理。在源码中，主要涉及三个类：

• Observer

　　作为数据的观察者，在初始化实例时会递归地遍历data，内部封装了Object.defineProperty()来拦截数据，将数据转换成getter/setter的形式来追踪变化。对于数组类型的数据，由于它们不像Object类型那样有getter/setter，因此这里是通过自定义方法来覆盖原生的原型方法实现拦截。

• Dep

　　作为数据更新的发布者，在get数据时收集那些订阅了该数据的Watcher；然后在set数据时发布更新，通知相应的Wacther数据已经发生更改。

• Watcher

　　作为数据的订阅者，也就是“依赖”。订阅的数据发生改变时会向外界发送通知，触发视图更新或触发用户的某个回调函数。

 

缺陷：

　　对于Object类型的数据，getter/setter只能追踪一个数据是否被修改，无法追踪数据是否新增或删除属性。因此，Vue2中提供了Vue.set()和Vue,delete()方法来添加或删除属性，确保新添加的属性也具有响应式。

　　对于数组类型的数据，一些不调用原型方法修改数据的方式，Vue2也监测不到。

　　对于深度监听需要一次性进行递归遍历，影响性能。

 

回到顶部

理解Vue3响应式原理

　　Vue3基于ES6新增的Proxy对象实现数据代理以及通过Reflect对源数据进行操作，它解决了Vue2中无法追踪数据新增或删除属性的问题。另外，Proxy可以直接监听数组，无需像Vue2响应式那样需要重写数组方法进行拦截。