发布于 由admin

Vue 3源码深度解析之：`track`和`trigger`：依赖收集和派发更新的内部工作机制。

各位观众老爷，大家好！今天给大家伙儿带来的是Vue 3源码深度解析系列中的重头戏——track和trigger：依赖收集和派发更新的内部工作机制。

咱们先来个开胃小菜，想想Vue响应式系统的核心目标是什么？简单来说，就是当数据发生变化时，能自动更新视图。这听起来挺简单的，但背后可藏着不少玄机。track和trigger，就是实现这个目标的两大支柱。

一、响应式系统的基石：依赖收集（Track）

  1. 什么是依赖？

别急，我们先来理解一下“依赖”这个概念。在Vue的世界里，依赖指的是组件或者计算属性等“观察者”需要依赖某个响应式数据，以便在该数据发生变化时得到通知。举个例子：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue!');
    return { message };
  }
};
</script>

在这个例子中，模板中的{{ message }}就依赖于message这个响应式数据。当message的值改变时，组件需要重新渲染。

  1. track函数的作用：搭建数据和观察者之间的桥梁

track函数的核心作用是建立响应式数据和观察者之间的联系。它负责记录哪些观察者（例如组件、计算属性）依赖于哪些响应式数据。

让我们简化一下track函数的实现（实际源码更复杂，但原理类似）：

// 全局变量，存储当前激活的 effect（观察者）
let activeEffect = null;

// 依赖 WeakMap<target, Map<key, Set<effect>>>
// target: 响应式对象
// key: 响应式对象的属性
// effect: 观察者函数
const targetMap = new WeakMap();

function track(target, key) {
  if (!activeEffect) {
    return; // 没有激活的 effect，直接返回
  }

  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }

  let deps = depsMap.get(key);
  if (!deps) {
    deps = new Set();
    depsMap.set(key, deps);
  }

  if (!deps.has(activeEffect)) {
    deps.add(activeEffect);
    activeEffect.deps.push(deps); // 双向存储，方便清理
  }
}

// effect 函数，用于创建观察者
function effect(fn) {
  const effectFn = () => {
    activeEffect = effectFn; // 设置当前激活的 effect
    effectFn.deps = []; // 用于存储当前 effect 依赖的 deps
    const result = fn(); // 执行传入的函数，触发 getter，进行依赖收集
    activeEffect = null; // 重置 activeEffect
    return result;
  };
  effectFn(); // 立即执行一次，进行依赖收集
  return effectFn;
}

这段代码的核心逻辑是：

  • activeEffect: 这是一个全局变量，用于存储当前激活的effect函数（也就是观察者函数）。 只有在effect函数执行期间，activeEffect才会被赋值。
  • targetMap: 这是一个WeakMap，用于存储响应式对象和其属性对应的依赖关系。 WeakMap的好处是，当响应式对象不再被引用时，可以自动从targetMap中移除，避免内存泄漏。
  • track(target, key): 这个函数接收两个参数：target（响应式对象）和key（响应式对象的属性）。 它会检查当前是否有激活的activeEffect，如果有，就将activeEffect添加到target的key属性的依赖集合中。
  • effect(fn): 这个函数接收一个函数fn作为参数，并返回一个新的函数effectFn。 effectFn会执行fn，并在执行fn之前设置activeEffect为effectFn，执行之后重置activeEffect为null。 这样，在执行fn的过程中，任何对响应式数据的访问都会触发track函数，从而建立依赖关系。
  1. 依赖收集的触发时机

依赖收集发生在访问响应式数据的getter时。当我们访问一个响应式数据时，例如message.value，会触发getter函数，而getter函数内部会调用track函数，将当前激活的activeEffect添加到依赖集合中。

让我们看一个例子：

import { reactive } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 30
});

effect(() => {
  console.log(`Name: ${state.name}`); // 访问 state.name，触发依赖收集
});

effect(() => {
  console.log(`Age: ${state.age}`); // 访问 state.age，触发依赖收集
});

state.name = 'Bob'; // 修改 state.name，触发更新
state.age = 31;   // 修改 state.age，触发更新

在这个例子中，第一个effect函数会依赖于state.name，第二个effect函数会依赖于state.age。当state.name或state.age的值改变时，对应的effect函数会被重新执行。

  1. 更细致的案例分析（结合Vue组件渲染）

假设我们有如下的Vue组件：

<template>
  <div>
    <p>Name: {{ person.name }}</p>
    <p>Age: {{ person.age }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const person = reactive({
      name: 'Alice',
      age: 30
    });

    return { person };
  }
};
</script>

当Vue组件首次渲染时，会执行setup函数，创建person这个响应式对象。接着，在渲染模板时，会访问person.name和person.age，从而触发依赖收集。 Vue内部会将组件的更新函数作为effect函数执行，因此，组件的更新函数会依赖于person.name和person.age。

二、数据变化时的通知机制：派发更新（Trigger）

  1. trigger函数的作用：通知依赖于数据的观察者

当响应式数据发生变化时，我们需要通知所有依赖于该数据的观察者，让它们执行更新操作。 trigger函数就是负责这个任务的。

让我们简化一下trigger函数的实现：

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return; // 没有依赖，直接返回
  }

  const deps = depsMap.get(key);
  if (!deps) {
    return; // 没有依赖，直接返回
  }

  // 创建一个新的 Set，避免在迭代过程中修改 deps
  const effectsToRun = new Set(deps);
  effectsToRun.forEach(effectFn => {
    effectFn(); // 执行 effect 函数，触发更新
  });
}

这段代码的核心逻辑是：

  • trigger(target, key): 这个函数接收两个参数：target（响应式对象）和key（响应式对象的属性）。 它会从targetMap中找到target的key属性对应的依赖集合，然后遍历这个集合，执行每个effect函数。
  1. trigger函数的触发时机

trigger函数发生在设置响应式数据的setter时。当我们修改一个响应式数据时，例如message.value = 'New message'，会触发setter函数，而setter函数内部会调用trigger函数，通知所有依赖于该数据的观察者。

让我们回到之前的例子：

import { reactive } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 30
});

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

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

state.name = 'Bob'; // 修改 state.name，触发 trigger
state.age = 31;   // 修改 state.age，触发 trigger

当state.name被修改为'Bob'时，会触发state.name的setter函数，setter函数会调用trigger(state, 'name')，从而执行依赖于state.name的effect函数，也就是第一个effect函数。 同理，当state.age被修改为31时，会触发state.age的setter函数，setter函数会调用trigger(state, 'age')，从而执行依赖于state.age的effect函数，也就是第二个effect函数。

  1. 调度器（Scheduler）的加入：优化更新

在实际的Vue 3源码中，trigger函数并不会立即执行所有的effect函数，而是将它们放入一个队列中，然后通过调度器（Scheduler）来统一执行。 这样做可以避免不必要的重复更新，提高性能。

让我们稍微修改一下trigger函数的实现，加入调度器：

const queue = new Set();
let isFlushing = false;

function queueJob(job) {
  queue.add(job);
  if (!isFlushing) {
    isFlushing = true;
    Promise.resolve().then(() => {
      queue.forEach(job => job());
      queue.clear();
      isFlushing = false;
    });
  }
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return;
  }

  const deps = depsMap.get(key);
  if (!deps) {
    return;
  }

  const effectsToRun = new Set(deps);
  effectsToRun.forEach(effectFn => {
    queueJob(effectFn); // 将 effect 函数放入队列中
  });
}

这段代码的关键改动是：

  • queueJob(job): 这个函数接收一个job（也就是effect函数）作为参数，并将它放入一个队列queue中。 如果当前没有正在执行的更新，它会创建一个Promise，并在Promise resolve之后，遍历队列，执行所有的job，然后清空队列。

这样，即使在同一个事件循环中多次修改同一个响应式数据，也只会触发一次更新。

  1. 更细致的案例分析（结合组件更新和调度器）

假设我们有如下的Vue组件：

<template>
  <div>
    <p>Name: {{ person.name }}</p>
    <p>Age: {{ person.age }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const person = reactive({
      name: 'Alice',
      age: 30
    });

    const updatePerson = () => {
      person.name = 'Bob';
      person.age = 31;
    };

    return { person, updatePerson };
  },
  mounted() {
    this.updatePerson(); // 在组件挂载后更新 person 的值
  }
};
</script>

在这个例子中，updatePerson函数会同时修改person.name和person.age。 如果没有调度器，那么组件会更新两次，一次是因为person.name的改变，一次是因为person.age的改变。 但是，由于有了调度器，这两个更新会被合并到同一个队列中，然后在下一个事件循环中统一执行，从而避免了不必要的重复更新。

三、总结：track和trigger的协作

让我们用一个表格来总结一下track和trigger的作用：

函数 作用 触发时机
track 收集依赖，建立响应式数据和观察者之间的联系。 将当前激活的effect函数添加到响应式数据的依赖集合中。 访问响应式数据的getter时。
trigger 派发更新，通知所有依赖于响应式数据的观察者执行更新操作。 从响应式数据的依赖集合中取出所有的effect函数，并将它们放入调度器队列中，等待执行。 修改响应式数据的setter时。

总而言之，track负责收集依赖，trigger负责派发更新。 它们相互协作，共同构成了Vue响应式系统的核心。 通过track，Vue知道哪些组件需要依赖哪些数据；通过trigger，Vue可以在数据发生变化时，通知这些组件进行更新。 有了这两个函数，Vue才能实现自动更新视图的魔法。

四、深入思考：源码中的细节

上面的简化版本只是为了方便理解。 Vue 3的源码中，track和trigger的实现要复杂得多。 例如，它们会考虑：

  • shallowReactive和readonly: 这两种响应式类型不会递归地将所有属性都转换为响应式数据。 track和trigger需要根据不同的响应式类型进行不同的处理。
  • WeakRef: Vue 3使用WeakRef来存储effect函数，以便在effect函数不再被引用时，可以自动从依赖集合中移除，避免内存泄漏。
  • Set和Map的优化: Vue 3对Set和Map进行了优化，以提高性能。

如果你对这些细节感兴趣，可以深入阅读Vue 3的源码，相信你会收获更多。

五、课后作业

  1. 尝试手写一个简单的响应式系统，包含reactive、effect、track和trigger函数。
  2. 阅读Vue 3的源码，理解track和trigger的完整实现。
  3. 思考一下，除了调度器，还有哪些方法可以优化Vue的响应式系统？

好了，今天的分享就到这里。 希望大家能够对Vue 3的track和trigger有更深入的理解。 下次再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注