Vue3 的响应式系统是其核心特性之一，它通过 Proxy 和 Reflect 实现了对数据的监听和响应。相比于 Vue2 中的 Object.defineProperty，Vue3 的响应式系统更加灵活和强大。本文将详细介绍 Vue3 中如何使用 Proxy 和 Reflect 来实现响应式数据。
Proxy 是 ES6 引入的一个新特性，它可以用来创建一个对象的代理，从而实现对对象操作的拦截和自定义。Proxy 的基本语法如下：
计算
安全
数据库
网络和加速
企业服务
const proxy = new Proxy(target, handler);
target：要代理的目标对象。handler：一个对象，包含了对目标对象操作的拦截器（也称为“陷阱”）。handler 对象中可以定义多个拦截器，例如 get、set、deleteProperty 等，这些拦截器会在对代理对象进行相应操作时被触发。
Reflect 是 ES6 引入的另一个新特性，它提供了一组与 Proxy 拦截器一一对应的静态方法。Reflect 的作用是简化对对象的操作，并且与 Proxy 配合使用时，可以更方便地实现默认行为。
例如，Reflect.get(target, property) 可以用来获取对象的属性值，而 Reflect.set(target, property, value) 可以用来设置对象的属性值。
Vue3 的响应式系统通过 Proxy 和 Reflect 来实现对数据的监听和响应。具体来说，Vue3 使用 Proxy 来拦截对数据的访问和修改操作，并在这些操作发生时触发相应的更新逻辑。
在 Vue3 中，reactive 函数用于创建一个响应式对象。reactive 函数的实现大致如下：
function reactive(target) {
return new Proxy(target, {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver);
track(target, key); // 依赖收集
return isObject(res) ? reactive(res) : res; // 递归处理嵌套对象
},
set(target, key, value, receiver) {
const oldValue = target[key];
const result = Reflect.set(target, key, value, receiver);
if (oldValue !== value) {
trigger(target, key); // 触发更新
}
return result;
},
deleteProperty(target, key) {
const hadKey = hasOwn(target, key);
const result = Reflect.deleteProperty(target, key);
if (hadKey) {
trigger(target, key); // 触发更新
}
return result;
},
});
}
get 拦截器：在访问对象属性时触发，用于依赖收集。如果属性值是对象，则递归调用 reactive 函数，使其也变成响应式。set 拦截器：在设置对象属性时触发，用于触发更新。只有在属性值发生变化时才会触发更新。deleteProperty 拦截器：在删除对象属性时触发，用于触发更新。Vue3 的响应式系统通过依赖收集和触发更新来实现数据的响应式。具体来说，当访问一个响应式对象的属性时，Vue3 会将该属性与当前的副作用函数（例如组件的渲染函数）关联起来，这个过程称为依赖收集。当该属性发生变化时，Vue3 会触发与该属性关联的所有副作用函数，这个过程称为触发更新。
依赖收集的核心是 track 函数，它的作用是将当前的副作用函数与目标对象的属性关联起来。track 函数的实现大致如下：
const targetMap = new WeakMap();
function track(target, key) {
if (!activeEffect) return; // 没有活动的副作用函数，直接返回
let depsMap = targetMap.get(target);
if (!depsMap) {
targetMap.set(target, (depsMap = new Map()));
}
let dep = depsMap.get(key);
if (!dep) {
depsMap.set(key, (dep = new Set()));
}
dep.add(activeEffect); // 将副作用函数添加到依赖集合中
}
targetMap：一个 WeakMap，用于存储目标对象与其依赖集合的映射关系。depsMap：一个 Map，用于存储目标对象的属性与其依赖集合的映射关系。dep：一个 Set，用于存储与目标对象的属性关联的副作用函数。触发更新的核心是 trigger 函数，它的作用是触发与目标对象的属性关联的所有副作用函数。trigger 函数的实现大致如下：
function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) return; // 没有依赖集合，直接返回
const dep = depsMap.get(key);
if (dep) {
dep.forEach(effect => effect()); // 执行所有副作用函数
}
}
depsMap：从 targetMap 中获取目标对象的依赖集合。dep：从 depsMap 中获取目标属性的依赖集合。effect：执行与目标属性关联的所有副作用函数。副作用函数是指那些依赖于响应式数据的函数，例如组件的渲染函数。在 Vue3 中，副作用函数通过 effect 函数来创建。effect 函数的实现大致如下：
let activeEffect;
function effect(fn) {
activeEffect = fn;
fn(); // 执行副作用函数
activeEffect = null;
}
activeEffect：当前活动的副作用函数。fn：要执行的副作用函数。在 effect 函数中，首先将 activeEffect 设置为当前的副作用函数，然后执行该副作用函数。在执行过程中，如果访问了响应式数据的属性，则会触发 track 函数，将副作用函数与属性关联起来。
下面是一个简单的示例，展示了如何使用 Proxy 和 Reflect 来实现响应式数据：
const data = { count: 0 };
const proxy = new Proxy(data, {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver);
console.log(`访问属性 ${key}: ${res}`);
return res;
},
set(target, key, value, receiver) {
const oldValue = target[key];
const result = Reflect.set(target, key, value, receiver);
if (oldValue !== value) {
console.log(`设置属性 ${key}: ${value}`);
}
return result;
},
deleteProperty(target, key) {
const hadKey = hasOwn(target, key);
const result = Reflect.deleteProperty(target, key);
if (hadKey) {
console.log(`删除属性 ${key}`);
}
return result;
},
});
proxy.count; // 访问属性 count: 0
proxy.count = 1; // 设置属性 count: 1
delete proxy.count; // 删除属性 count
在这个示例中，我们创建了一个 Proxy 对象 proxy，并定义了 get、set 和 deleteProperty 拦截器。当我们访问、设置或删除 proxy 对象的属性时，相应的拦截器会被触发，并输出相应的日志。
Vue3 的响应式系统通过 Proxy 和 Reflect 实现了对数据的监听和响应。Proxy 用于拦截对数据的访问和修改操作，而 Reflect 则用于简化对对象的操作。通过依赖收集和触发更新，Vue3 能够自动追踪数据的变化，并在数据变化时触发相应的更新逻辑。
相比于 Vue2 中的 Object.defineProperty，Vue3 的响应式系统更加灵活和强大，能够更好地处理嵌套对象和数组等复杂数据结构。同时，Proxy 和 Reflect 的使用也使得代码更加简洁和易于维护。
希望本文能够帮助你更好地理解 Vue3 中的响应式系统，并在实际开发中灵活运用 Proxy 和 Reflect。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
