怎么手写Vue3响应式系统

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

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

Vue3 的响应式系统主要依赖于以下几个概念：

• 响应式对象：通过 Proxy 代理的对象，能够拦截对对象属性的读取和修改操作。
• 依赖收集：在读取属性时，收集当前正在执行的副作用函数（effect），以便在属性变化时重新执行这些函数。
• 触发更新：在修改属性时，通知所有依赖该属性的副作用函数进行更新。

2. 实现响应式对象

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

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

3. 依赖收集与触发更新

为了实现依赖收集和触发更新，我们需要维护一个全局的 WeakMap 来存储每个对象的依赖关系。

const targetMap = new WeakMap();

function track(target, key) {
  if (!activeEffect) return; // 没有正在执行的副作用函数，直接返回
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }
  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }
  dep.add(activeEffect); // 将当前副作用函数添加到依赖集合中
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => effect()); // 执行所有依赖该属性的副作用函数
  }
}

4. 副作用函数

副作用函数是指那些依赖于响应式数据的函数，当响应式数据变化时，这些函数需要重新执行。

let activeEffect = null;

function effect(fn) {
  activeEffect = fn;
  fn(); // 首次执行副作用函数
  activeEffect = null;
}

5. 示例

现在我们可以使用上述代码来实现一个简单的响应式系统。

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

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

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

6. 总结

通过以上步骤，我们实现了一个简化版的 Vue3 响应式系统。虽然这个系统还非常基础，但它已经涵盖了 Vue3 响应式系统的核心思想：通过 Proxy 拦截对象的读取和修改操作，利用依赖收集和触发更新机制来实现数据的自动更新。

在实际的 Vue3 中，响应式系统还包含了许多优化和扩展，例如 ref、computed、watch 等特性。但通过这个简化的实现，你已经能够理解 Vue3 响应式系统的基本工作原理。