从零开始：新手如何手写实现一个轻量级Reactive系统

一、理解Reactive的核心机制

响应式系统的核心在于数据变化时自动触发关联逻辑的执行。这一机制通常由三个关键部分组成：

1. 依赖收集（Dependency Tracking）：在计算属性或副作用函数执行时，记录当前活跃的依赖对象（如Watcher）。
2. 触发更新（Update Triggering）：当数据变化时，通知所有依赖该数据的对象执行更新。
3. 脏检查优化（Dirty Checking）：通过标记状态减少不必要的计算（可选）。

以Vue 2的响应式为例，其通过Object.defineProperty劫持属性访问，在getter中收集依赖，在setter中触发更新。而Vue 3的Proxy方案则直接拦截整个对象的操作，提供了更灵活的依赖管理。

二、手写Reactive的基础实现

1. 依赖收集与触发更新的基本模型

class Dep {
  constructor() {
    this.subscribers = new Set(); // 使用Set避免重复
  }
  depend() {
    if (activeEffect) {
      this.subscribers.add(activeEffect); // 收集当前活跃的Effect
    }
  }
  notify() {
    this.subscribers.forEach(effect => effect()); // 触发所有依赖的更新
  }
}
let activeEffect = null;
function watchEffect(effect) {
  activeEffect = effect;
  effect(); // 首次执行以收集依赖
  activeEffect = null;
}

关键点：

• Dep类管理依赖关系，depend()方法在数据访问时被调用。
• watchEffect函数包装用户逻辑，通过activeEffect的上下文传递实现依赖收集。

2. 劫持对象属性的访问与修改

使用Object.defineProperty实现基础响应式：

function reactive(obj) {
  const deps = new Map(); // 存储每个属性的Dep实例
  return new Proxy(obj, {
    get(target, key) {
      if (!deps.has(key)) {
        deps.set(key, new Dep());
      }
      deps.get(key).depend(); // 触发依赖收集
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      if (deps.has(key)) {
        deps.get(key).notify(); // 触发更新
      }
      return true;
    }
  });
}

优化点：

• 使用Proxy替代Object.defineProperty可统一处理数组和嵌套对象。
• 避免对不可写属性（如const定义的变量）进行响应式处理。

三、进阶优化与实战技巧

1. 嵌套对象的响应式处理

递归实现深度响应式：

function deepReactive(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  return reactive(
    Object.keys(obj).reduce((newObj, key) => {
      newObj[key] = deepReactive(obj[key]); // 递归处理嵌套对象
      return newObj;
    }, {})
  );
}

注意事项：

• 循环引用会导致栈溢出，需通过WeakMap记录已处理的对象。
• 避免对函数、Symbol等非数据属性进行响应式转换。

2. 异步更新的调度策略

默认的同步更新可能导致重复渲染，可通过队列优化：

const queue = new Set();
let isFlushing = false;
function queueEffect(effect) {
  queue.add(effect);
  if (!isFlushing) {
    isFlushing = true;
    Promise.resolve().then(() => { // 微任务调度
      queue.forEach(effect => effect());
      queue.clear();
      isFlushing = false;
    });
  }
}

优势：

• 合并同一事件循环中的多次更新，减少渲染次数。
• 兼容异步逻辑（如API请求后的数据更新）。

3. 性能监控与调试工具

添加日志以追踪依赖关系：

class DebugDep extends Dep {
  depend() {
    console.log(`Dependency collected for key: ${this.key}`);
    super.depend();
  }
  notify() {
    console.log(`Notification sent for key: ${this.key}`);
    super.notify();
  }
}

实用场景：

• 定位不必要的依赖（如计算属性中访问了无关数据）。
• 验证更新频率是否符合预期。

四、常见问题与解决方案

1. 问题：新增属性不触发更新

原因：Object.defineProperty无法拦截新增属性。
解决方案：

• 使用Vue.set或手动调用reactive转换新增属性。
• 在Proxy方案中，通过set陷阱统一处理新增和修改。

2. 问题：数组索引修改不触发更新

原因：直接通过索引修改数组（如arr[0] = 1）不会触发setter。
解决方案：

• 重写数组的push、pop等变异方法。
• 使用Proxy拦截set操作中的索引访问。

3. 问题：循环依赖导致无限更新

示例：

const state = reactive({ a: 0, b: 0 });
watchEffect(() => {
  state.a = state.b + 1; // 修改a会触发b的更新，反之亦然
  state.b = state.a + 1;
});

解决方案：

• 添加更新锁，防止同一周期内的重复触发。
• 通过nextTick延迟部分更新。

五、总结与扩展建议

1. 从简单到复杂：先实现基础响应式，再逐步添加异步调度、性能优化等功能。
2. 测试驱动开发：编写测试用例验证依赖收集和更新触发（如修改属性后检查关联函数是否执行）。
3. 参考成熟方案：分析Vue/React的源码，理解其设计权衡（如Vue 3的Composition API对响应式的改进）。

通过本文的实践，新手开发者不仅能掌握Reactive的核心原理，还能根据实际需求定制轻量级响应式库，为后续学习前端框架打下坚实基础。