J*aScript响应式原理实现

发布时间：2025-10-30

点击量：

响应式系统通过Proxy拦截数据操作，利用track和trigger实现依赖收集与更新。当读取属性时收集副作用函数，修改属性时触发对应更新，结合effect建立响应式联系，从而自动同步数据与视图。

javascript响应式原理实现

J*aScript响应式系统的核心是数据变化能自动触发视图更新。实现这一机制的关键在于“监听数据变化”和“依赖收集与派发更新”。目前主流框架如Vue 2.x使用Object.defineProperty，Vue 3则改用Proxy来实现响应式。下面通过一个简化版的实现帮助理解其原理。

1. 使用 Proxy 拦截对象操作

Proxy 可以代理整个对象，拦截 get、set、delete 等操作，比 Object.defineProperty 更强大。

示例代码：

function reactive(target) {
  return new Proxy(target, {
    get(obj, key) {
      // 收集依赖（谁在读这个属性）
      track(obj, key);
      return Reflect.get(obj, key);
    },
    set(obj, key, value) {
      // 触发更新（属性变化后通知更新）
      const result = Reflect.set(obj, key, value);
      trigger(obj, key);
      return result;
    }
  });
}

2. 依赖收集与更新触发

当读取属性时记录当前副作用函数（如渲染函数），当属性变化时重新执行这些函数。

定义两个核心函数 track 和 trigger：

// 存储依赖关系：target -> key -> effects
const targetMap = new WeakMap();

function track(target, key) {
  if (!activeEffect) return; // 没有正在执行的副作用
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep);
  }
  dep.add(activeEffect); // 收集当前 effect
}

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 函数包装需要响应式的操作，比如页面渲染。

千帆AppBuilder

百度推出的一站式的AI原生应用开发资源和工具平台，致力于实现人人都能开发自己的AI原生应用。

208 查看详情千帆AppBuilder

实现一个简单的 effect 函数：

let activeEffect = null;

function effect(fn) {
  const effectFn = () => {
    activeEffect = effectFn;
    fn(); // 执行函数，触发 getter，从而收集依赖
    activeEffect = null;
  };
  effectFn(); // 立即执行一次
  return effectFn;
}

使用示例：

const state = reactive({ count: 0 });

effect(() => {
  console.log('count 更新了:', state.count);
});

state.count++; // 输出: count 更新了: 1

4. 完整流程梳理

响应式系统的执行流程如下：

调用 reactive 创建响应式对象，通过 Proxy 拦截 get/set
执行 effect 函数时，将回调赋值给 activeEffect
读取属性触发 get，track 收集 activeEffect 到依赖集合
修改属性触发 set，trigger 遍历并执行所有依赖函数

基本上就这些。虽然实际框架中还有调度器、计算属性、嵌套对象处理等优化，但核心思想一致：依赖追踪 + 自动更新。理解 Proxy + effect + 依赖收集，就掌握了现代 J*aScript 响应式的基础。不复杂但容易忽略细节。

以上就是J*aScript响应式原理实现的详细内容，更多请关注其它相关文章！

上一篇：解决J*aScript客户端密码强度验证失效问题：动态检查机

下一篇：JS前端加密的几种常见方式_j*ascript安全