vue2的响应式原理学“废”了吗？继续观摩vue3响应式原理Proxy

之前写过一篇文章谈论 vue2.x 的响应式原理，但因为 vue3 也来了，紧跟着 vue3 的步伐，周一开始学起了 vue3 的响应式原理。

大家应该都听过， vue3 用 proxy 来解决响应式原理，同时它解决了 vue2 中 Object.definePropery 存在的一些问题，但同时也带来了一些问题。

在下面的这篇文章中，将讲解关于 vue3 用 proxy 如何实现响应式，以及带来的一些问题。一起来学习吧💯

一、🟩回顾Object.defineProperty

这里需要大家对 ObjectProperty 的知识点有一个预先了解，如有需要了解可点击文章进行查看~

现在，我们来回顾下 Object.defineProperty 的缺点：

• 深度监听时需要一次性递归；
• 无法监听新增属性/删除属性（需要配合 Vue.set 或 Vue.delete 使用）；
• 无法原生监听数组，需要特殊处理。

带着 Object.defineProperty 的这几个缺点，接下来我们开始进入 Proxy 的世界。

二、🟨Proxy基本使用

下面用一段代码来演示 Proxy 的基本使用。具体代码如下：

const data = {
   
    name: 'monday',
    age:18
}
//const data = ['a', 'b', 'c']

const proxyData = new Proxy(data, {
   
    get(target, key, receiver){
   
        //只处理本身(非原型的)属性
        const ownKeys = Reflect.ownKeys(target)
        if(oenKeys.includes(key)){
   
            console.log('get', key) //监听
        }
        const result = Reflect.get(target, key, receiver)
        return result // 返回结果
    },
    set(target, key, val, receiver){
   
        //重复的数据，不处理
        if(val === target[key]){
   
            return true
        }

        const result = Reflect.set(target, key, val, receiver)
        console.log('set', key, val)
        //console.log('result', result) //true
        return result // 是否设置成功
    },
    deleteProperty(target, key){
   
        const result = Reflect.deleteProperty(target, key)
        console.log('delete property', key)
        return result // 是否删除成功
    }
})

通过以上代码可得，我们先定义一个对象字面量的 data ，之后在作为 Proxy 实例化的参数进行传递。且 proxyData 实现了 get 、 set 和 deleteProperty 的方法，可以对数据进行增删改操作。

三、🟦学习Proxy语法：Reflect

我们再来认识 Proxy 的一个好朋友，Reflect。

Reflect 对象有着和 Proxy 一一对应的能力，Reflect对象一共有 13 个静态方法，这也就是我们平常所听到的 proxy 有多达13种拦截行为，而 Reflect 的这13种静态方法匹配的就是 Proxy 的13种拦截行为 。

Reflect 的出现是为了替换掉 Object 上的工具函数，这里不做具体介绍，详情可查看文档 。

四、🟧Vue3如何用Proxy实现响应式

1、实现响应式

下面来实现Proxy的响应式。附上代码：

// 创建响应式
function reactive(target = {}) {
    if (typeof target !== 'object' || target == null) {
        // 不是对象或数组，则返回
        return target
    }

    // 代理配置
    const proxyConf = {
        get(target, key, receiver) {
            // 只处理本身（非原型的）属性
            const ownKeys = Reflect.ownKeys(target)
            if (ownKeys.includes(key)) {
                console.log('get', key) // 监听
            }

            const result = Reflect.get(target, key, receiver)

            // 深度监听
            return reactive(result)
        },
        set(target, key, val, receiver) {
            // 重复的数据，不处理
            if (val === target[key]) {
                return true
            }

            const ownKeys = Reflect.ownKeys(target)
            // 判断是已有属性还是新增属性
            if (ownKeys.includes(key)) {
                console.log('已有的 key', key)
            } else {
                console.log('新增的 key', key)
            } 

            const result = Reflect.set(target, key, val, receiver)
            console.log('set', key, val)
            // console.log('result', result) // true
            return result // 是否设置成功
        },
        deleteProperty(target, key) {
            const result = Reflect.deleteProperty(target, key)
            console.log('delete property', key)
            // console.log('result', result) // true
            return result // 是否删除成功
        }
    }

    // 生成代理对象
    const observed = new Proxy(target, proxyConf)
    return observed
}

// 测试数据
const data = {
    name: 'monday',
    age: 18,
    info: {
        city: 'FuZhou',
        a: {
            b: {
                c: {
                    d: {
                        e: 100
                    }
                }
            }
        }
    }
}

const proxyData = reactive(data)

我们在控制台来验证数据：

从上图中可以看到，用 proxy 来实现响应式，如果遇到需要深度递归的数组时，它不会像 defineProperty 那样深度递归，它会在什么时候 get ，什么时候再深度递归。本质上来讲就是，你获取到哪一层，那一层才会触发响应式。你获取不到的深层，它就不会触发响应式。且从代码中我们可以了解到， Proxy 在修改属性时，如果数据是重复的，则不进行处理。如果数据不重复，再进行处理。这样一来，就极大程度上提高了软件的性能。

2、Proxy总结

现在来对上述Proxy的内容做一个总结：

（1）深度监听，性能更好

defineProperty 是一次性递归完成；而 Proxy 是什么时候 get ，什么时候再深度递归。

（2）可监听 新增/删除 属性

在 vue2 中， defineProperty 是无法新增/删除属性的，需要配合 Vue.set 和 Vue.delete 来使用，而在 Vue3 中， Proxy 可以新增和删除属性，无需进行特殊处理。

（3）可监听数组变化

在 vue2 中，监听数组变化是需要进行特殊处理，且只能一次性深度递归完成。而在 vue3 中，可以监听数组变化，并且是什么时候get什么时候再递归，获取不到的深层，不会触发响应式。

3、两者对比

讲到这里，我们再把 vue2 中的 Object.defineProperty 和 vue3 中的 Proxy 做一个对比：

• Proxy 能良好的规避 Object.defineProperty 的问题；
• Proxy 无法兼容所有浏览器（如 IE11 ），且无法 polyfill 。

五、🟪结束语

从某种程度上来说， vue3 的 Proxy 确实带来了一些好处，但同时也带来了一些问题。正因为如此， vue2 的 Object.defineProperty 还会存在很长一段时间。所以，新技术的使用总会经过一个从试用阶段到稳定阶段的过程。

关于vue3的响应式原理讲到这里就结束啦！如有疑问或文章有误欢迎评论区留言或私信交流~

• 关注公众号 星期一研究室 ，第一时间关注技术干货，更多有趣的专栏待你解锁~
• 如果这篇文章对你有用，记得 一键三连 再走哦！
• 我们下期见！🥂🥂🥂