Vue.js响应式系统可手动实现为轻量级状态管理器：基于Proxy拦截读写、effect注册副作用、track收集依赖、trigger触发更新，支持嵌套对象响应式。
Vue.js 本身已内置响应式系统（基于 ref、reactive、computed 等），但若想脱离 Vue 组件、在纯 JavaScript 环境中模拟一个轻量级、可复用的响应式状态管理器，可以借助其核心原理——Proxy + effect + track/trigger 机制。下面是一个极简但可运行的实现，兼容 Vue 3 的响应式语义。
核心思路：用 Proxy 拦截读写，用 effect 收集依赖
我们不直接使用 Vue 的内部 API（如 createReactive），而是手动实现一个最小闭环：
-
state：用
Proxy包裹普通对象，拦截get（用于依赖收集）和set（用于触发更新） - effect：一个注册副作用函数的工具，执行时会临时激活，让被读取的响应式属性记录它
-
track：在
get时，把当前活跃的 effect 和该属性关联起来 -
trigger：在
set时，找出所有依赖该属性的 effect 并重新执行
基础实现代码（ES Module 风格）
以下代码可在浏览器控制台或支持 ES 模块的环境中直接运行：
// 响应式状态管理器（极简版）
let activeEffect = null;
const effectStack = [];
<p>function effect(fn) {
const effectFn = () => {
activeEffect = effectFn;
effectStack.push(effectFn);
fn();
effectStack.pop();
activeEffect = effectStack[effectStack.length - 1] || null;
};
effectFn();
}</p><p>// 存储依赖：target → key → Set<effect>
const targetMap = new WeakMap();</p><p>function track(target, key) {
if (!activeEffect) return;
let depsMap = targetMap.get(target);
if (!depsMap) {
depsMap = new Map();
targetMap.set(target, depsMap);
}
let deps = depsMap.get(key);
if (!deps) {
deps = new Set();
depsMap.set(key, deps);
}
deps.add(activeEffect);
}</p><p>function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) return;
const effects = depsMap.get(key);
if (effects) {
effects.forEach(effect => effect());
}
}</p><p>function reactive(obj) {
return new Proxy(obj, {
get(target, key) {
const res = Reflect.get(target, key);
track(target, key);
return typeof res === 'object' && res !== null ? reactive(res) : res;
},
set(target, key, value) {
const oldVal = target[key];
const result = Reflect.set(target, key, value);
if (oldVal !== value) {
trigger(target, key);
}
return result;
}
});
}
如何使用它？
定义状态、创建副作用、修改状态并自动更新：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
立即学习“前端免费学习笔记（深入）”；
// 1. 创建响应式状态
const state = reactive({ count: 0, name: 'Vue' });
<p>// 2. 定义副作用（类似 computed 或 watch）
effect(() => {
console.log(<code>count is: ${state.count}</code>);
});</p><p>effect(() => {
console.log(<code>name is: ${state.name}</code>);
});</p><p>// 3. 修改状态 → 自动触发对应 effect
state.count++; // 输出：count is: 1
state.name = 'Pinia'; // 输出：name is: Pinia
注意：这个实现支持嵌套对象响应式（通过递归调用 reactive），但暂不支持数组索引赋值、length 变更等边界情况（如需完整支持，需额外处理 Array 原型方法）。
进阶提示：封装成 useStore 风格（类 Pinia）
你可以进一步封装为组合式 store：
function createStore(initialState) {
const state = reactive({ ...initialState });
return {
state,
setState(updater) {
if (typeof updater === 'function') {
updater(state);
} else {
Object.assign(state, updater);
}
}
};
}
<p>// 使用
const store = createStore({ count: 0 });
effect(() => {
console.log('store count:', store.state.count);
});
store.setState({ count: 1 }); // 自动响应
这已经具备了简易状态管理器的核心能力：声明式依赖、自动追踪、集中更新。实际项目中推荐直接使用 Pinia；但手写一遍有助于深入理解 Vue 响应式本质。
