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

vue3响应式原理

一文了解Vue3的响应式原理

一、🟩回顾Object.defineProperty
二、🟨Proxy基本使用
三、🟦学习Proxy语法：Reflect
四、🟧Vue3如何用Proxy实现响应式
- 1、实现响应式
- 2、Proxy总结
- - （1）深度监听，性能更好
  - （2）可监听新增/删除属性
  - （3）可监听数组变化
- 3、两者对比
五、🟪结束语

之前写过一篇文章谈论 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) //truereturn 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.get(target, name, receiver)
Reflect.set(target, name, value, receiver)
Reflect.has(obj, name)
Reflect.deleteProperty(obj, name)
Reflect.construct(target, args)
Reflect.getPrototypeOf(obj)
Reflect.setPrototypeOf(obj, newProto)
Reflect.apply(func, thisArg, args)
Reflect.defineProperty(target, propertyKey, attribute)
Reflect.getOwnPropertyDescriptor(target, propertyKey)
Reflect.isExtensible(target)
Reflect.preventExtensions(target)
Reflect.ownKeys(target)

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) // truereturn result // 是否设置成功},deleteProperty(target, key) {const result = Reflect.deleteProperty(target, key)console.log('delete property', key)// console.log('result', result) // truereturn 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

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