为什么要替换defineProperty?
在vue2中采用了Object.defineProperty
来实现对每一个数据属性的拦截,达到数据响应式。但是,这个做法有些局限性和不足:
1.在对象存在多个key情况下,需要进行遍历
2.如果存在嵌套对象的情况,还需要在defineReactive中进行递归
3.当给key赋值为对象的时候,还需要在set属性中进行递归
4.对一个对象的属性进行删除和添加,无法有效拦截
5.对数组的许多api操作无法拦截响应变化
总结:
- 检测不到对象属性的添加和删除
- 数组API方法无法监听到
- 需要对每个属性进行遍历监听,如果嵌套对象,需要深层监听,造成性能问题
总而言之,大量的盲目递归和遍历造成了性能的问题,许多操作无法拦截又使得后续需要重写api方法
引入Proxy
proxy是es6新增特性,proxy的监听是针对一个对象的,我们访问和操作这个代理都会被拦截,最主要的是proxy可以监听数组的变化(push,shift,splice),然后有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等,这是Object.defineProperty不具备的。
vue3如何使用proxy达到数据深层监听
首先大致的响应式流程和vue2差别是不大的,最关键的在于把先前的observe封装的defineProperty改成了proxy,内部深层监听是当调用get或者set时,判断一下,如果是对象,则递归调用一下new Proxy,返回一个proxy对象。这样的好处在于,不需要遍历,也不是无脑递归,而是按需要去对深层的对象进行封装。
function reactive(obj) {
if (typeof obj !== 'object' && obj != null) {
return obj
}
// Proxy相当于在对象外层加拦截
const observed = new Proxy(obj, {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver)
console.log(`获取${key}:${res}`)
return isObject(res) ? reactive(res) : res
},
return observed
}