探索Vue.js 3响应式系统中的奇妙世界：深度剖析Reactive源代码

前端

2023-11-19 17:32:36

导语

欢迎来到Vue.js 3响应式系统的探险之旅！今天，我们将深入Reactive源代码的奥秘，揭开它的神秘面纱。做好准备，踏上这场激动人心的旅程吧！

深入了解响应式系统的核心概念

在Vue.js 3的响应式系统中，有几个关键概念需要牢记：

副作用 (effect) ：任何依赖于响应式数据的操作。
依赖 (dependency) ：副作用与响应式数据之间的连接。
追踪 (track) ：在读取响应式数据时触发的过程，建立依赖。
触发 (trigger) ：响应式数据发生变化时触发的过程，通知依赖该数据的副作用。

追溯Reactive源代码

进入Reactive源代码，让我们从触发响应式数据更新的入口点开始。在effect.ts文件中，我们找到track函数，负责在读取响应式数据时建立依赖。

// effect.ts
export function track(target, type, key) {
  trackEffects(target, createDep(target, type, key));
}

trackEffects函数将依赖添加到当前活跃的副作用中。而createDep函数则创建一个新的依赖对象，该对象包含目标、类型和键等信息。

当响应式数据发生变化时，trigger函数就会被调用（位于scheduler.ts文件中），负责通知所有依赖该数据的副作用。

// scheduler.ts
export function trigger(target, type, key, newValue, oldValue) {
  const deps = (targetMap.get(target) || new Map()).get(key);
  if (deps) {
    deps.forEach(dep => {
      if (dep.type === TriggerOpTypes.SET) {
        dep.run();
      } else if (dep.type === TriggerOpTypes.ADD) {
        dep.run();
      }
    });
  }
}