答案：通过 Proxy 拦截 get/set，结合 WeakMap 存储依赖，利用 effect 收集并触发更新，实现响应式系统。具体为 reactive 创建代理对象，track 收集 activeEffect 依赖，trigger 时遍历执行，从而在数据变化时自动更新副作用函数，核心机制与 Vue 3 一致。
要构建一个响应式系统，类似 Vue 3 的 Reactive 系统，核心是利用 JavaScript 的 Proxy 捕获对象属性的读取和修改，并在变化时自动触发依赖更新。Vue 3 使用了 Proxy + Reflect + 依赖收集与触发机制来实现高效响应式。下面带你一步步实现一个简化但原理一致的响应式系统。
1. 响应式基础：使用 Proxy 实现 reactive
通过 Proxy 拦截对象的 get 和 set 操作，我们可以在访问属性时收集依赖，在修改属性时触发更新。
function reactive(target) {
if (typeof target !== ‘object’ || target === null) return target;
return new Proxy(target, {
get(obj, key, receiver) {
// 收集依赖
track(obj, key);
return Reflect.get(obj, key, receiver);
},
set(obj, key, value, receiver) {
const result = Reflect.set(obj, key, value, receiver);
// 触发依赖
trigger(obj, key);
return result;
}
});
}
2. 依赖收集与触发：track 和 trigger
我们需要一个地方存储“谁在依赖某个对象的哪个属性”。可以使用 WeakMap 存储对象结构，避免内存泄漏。
// 存储依赖关系：target -> key -> effects
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);
}
function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) return;
const dep = depsMap.get(key);
if (dep) {
dep.forEach(effect => effect());
}
}
3. 副作用函数：effect
effect 是响应式系统的执行单元。它包装一个函数，在执行时会触发 getter，从而被收集为依赖。
立即学习“前端免费学习笔记（深入）”；
let activeEffect = null;
function effect(fn) {
const effectFn = () => {
try {
activeEffect = effectFn;
return fn();
} finally {
activeEffect = null;
}
};
effectFn(); // 立即执行一次以触发依赖收集
return effectFn;
}
4. 实际使用示例
将以上模块组合起来，就可以实现一个简单的响应式系统。
const state = reactive({ count: 0 });
effect(() => {
console.log(‘count is:’, state.count);
});
state.count++; // 输出: count is: 1
state.count++; // 输出: count is: 2
每次 state.count 被修改，都会触发所有依赖它的 effect 函数重新执行。
基本上就这些。虽然这只是一个简化版本，但它涵盖了 Vue 3 响应式系统的核心思想：Proxy 拦截、依赖收集（track）、触发更新（trigger）以及副作用调度（effect）。真正生产级系统还会加入调度器、嵌套对象处理、数组监听、cleanup、computed 等优化，但底层逻辑一致。
以上就是如何构建一个响应式系统，类似于Vue 3的Reactivity？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525705.html
微信扫一扫 
支付宝扫一扫 
