vue3 中用proxy代替defineProperty 实现数据拦截

为什么要替换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
}