如何手写Vue3响应式系统

Vue3 的响应式系统是其核心特性之一，它通过 Proxy 和 Reflect 实现了数据的自动追踪和更新。本文将带你一步步手写一个简化版的 Vue3 响应式系统，帮助你理解其背后的原理。

1. 响应式系统的基本概念

在 Vue3 中，响应式系统的核心是通过 Proxy 对象来拦截对数据的访问和修改操作。当数据被访问时，系统会记录下依赖关系；当数据被修改时，系统会通知所有依赖该数据的部分进行更新。

2. 实现一个简单的响应式系统

2.1 创建 reactive 函数

首先，我们需要创建一个 reactive 函数，它可以将一个普通对象转换为响应式对象。

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      track(target, key); // 追踪依赖
      return result;
    },
    set(target, key, value, receiver) {
      const oldValue = Reflect.get(target, key, receiver);
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        trigger(target, key); // 触发更新
      }
      return result;
    },
  });
}

2.2 实现依赖追踪

为了实现依赖追踪，我们需要一个全局的 activeEffect 变量来存储当前正在执行的副作用函数（effect），以及一个 targetMap 来存储每个对象的依赖关系。

let activeEffect = null;
const targetMap = new WeakMap();

function track(target, key) {
  if (activeEffect) {
    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);
  }
}

2.3 实现触发更新

当数据发生变化时，我们需要触发所有依赖该数据的副作用函数。

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (depsMap) {
    const dep = depsMap.get(key);
    if (dep) {
      dep.forEach((effect) => effect());
    }
  }
}

2.4 实现副作用函数

副作用函数是响应式系统的核心，它会在数据变化时自动执行。我们可以通过 effect 函数来创建一个副作用函数。

function effect(fn) {
  activeEffect = fn;
  fn();
  activeEffect = null;
}

3. 使用示例

现在我们已经实现了一个简单的响应式系统，下面是一个使用示例：

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

effect(() => {
  console.log(`Count: ${state.count}`);
});

state.count++; // 输出: Count: 1
state.count++; // 输出: Count: 2

在这个示例中，state 是一个响应式对象，effect 函数会在 state.count 发生变化时自动执行，并输出最新的值。

4. 总结

通过以上步骤，我们实现了一个简化版的 Vue3 响应式系统。虽然这个系统还非常基础，但它已经展示了 Vue3 响应式系统的核心原理。在实际的 Vue3 源码中，响应式系统还包含了许多优化和扩展，例如 ref、computed 等特性，但它们的核心思想都是基于 Proxy 和依赖追踪的机制。

希望这篇文章能帮助你更好地理解 Vue3 的响应式系统，并激发你进一步探索 Vue3 源码的兴趣。