Vue.js 实现一个简单的响应式状态管理器-Vue.js-PHP中文网

vue.js响应式系统可手动实现为轻量级状态管理器：基于proxy拦截读写、effect注册副作用、track收集依赖、trigger触发更新，支持嵌套对象响应式。

vue.js 实现一个简单的响应式状态管理器

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();</effect></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;
}
});
}
</p>

如何使用它？

定义状态、创建副作用、修改状态并自动更新：

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
</p>

注意：这个实现支持嵌套对象响应式（通过递归调用 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 }); // 自动响应
</p>

这已经具备了简易状态管理器的核心能力：声明式依赖、自动追踪、集中更新。实际项目中推荐直接使用 Pinia；但手写一遍有助于深入理解 Vue 响应式本质。