从零构建 Vue3 源码：理解依赖收集和触发依赖

## 从零构建 Vue3 源码：理解依赖收集和触发依赖

**响应式系统** 是 Vue3 的核心功能之一，它允许我们定义响应式状态，当这些状态发生变化时，与之相关联的组件或视图也会自动更新。为了实现响应式系统，Vue3 采用了**依赖收集** 和**触发依赖** 机制。

### 依赖收集

当我们使用 Vue3 创建响应式数据时，这些数据会被包装成一个名为 `ReactiveEffect` 的对象。这个对象中包含了两个关键属性：`value` 和 `deps`。`value` 属性存储了响应式数据的当前值，而 `deps` 属性则是一个数组，用于存储所有依赖于该响应式数据的视图或组件。

当一个响应式数据的 `value` 属性发生变化时，Vue3 会自动触发 `ReactiveEffect` 对象的 `dep` 属性中存储的所有视图或组件的更新。这就是依赖收集的原理。

### 触发依赖

当一个视图或组件依赖于一个响应式数据时，Vue3 会将该视图或组件添加到 `ReactiveEffect` 对象的 `deps` 属性中。这意味着当该响应式数据的 `value` 属性发生变化时，Vue3 会自动触发该视图或组件的更新。

Vue3 通过一个名为 `track` 的函数来实现依赖收集。`track` 函数会将当前正在渲染的视图或组件添加到响应式数据的 `ReactiveEffect` 对象的 `deps` 属性中。当该响应式数据的 `value` 属性发生变化时，Vue3 会调用 `trigger` 函数来触发 `ReactiveEffect` 对象的 `deps` 属性中存储的所有视图或组件的更新。

### 小结

依赖收集和触发依赖是 Vue3 响应式系统的两个核心机制。它们使 Vue3 能够自动更新依赖于响应式数据的视图或组件，从而实现高效的响应式系统。

## 逐步构建 Vue3 的响应式原理

现在，我们将逐步构建 Vue3 的响应式原理，以便您更深入地理解 Vue3 是如何实现响应式系统的。

### 步骤 1：创建 ReactiveEffect 对象

首先，我们需要创建一个 `ReactiveEffect` 对象。这个对象中包含了两个关键属性：`value` 和 `deps`。`value` 属性存储了响应式数据的当前值，而 `deps` 属性则是一个数组，用于存储所有依赖于该响应式数据的视图或组件。

class ReactiveEffect {
constructor(value) {
this.value = value;
this.deps = [];
}
}

### 步骤 2：将响应式数据包装成 ReactiveEffect 对象

当我们使用 Vue3 创建响应式数据时，这些数据会被包装成一个 `ReactiveEffect` 对象。

const data = reactive({
name: 'John Doe'
});

这段代码将创建一个名为 `data` 的响应式对象，其中包含一个名为 `name` 的属性。`data.name` 的值是 `John Doe`。

### 步骤 3：实现 track 函数

当一个视图或组件依赖于一个响应式数据时，Vue3 会将该视图或组件添加到 `ReactiveEffect` 对象的 `deps` 属性中。

function track(target, key) {
const effect = activeEffect;
if (effect) {
const dep = effect.deps.get(target);
if (dep) {
dep.add(key);
} else {
const dep = new Set();
dep.add(key);
effect.deps.set(target, dep);
}
}
}

### 步骤 4：实现 trigger 函数

当一个响应式数据的 `value` 属性发生变化时，Vue3 会调用 `trigger` 函数来触发 `ReactiveEffect` 对象的 `deps` 属性中存储的所有视图或组件的更新。

function trigger(target, key) {
const effect = activeEffect;
if (effect) {
const dep = effect.deps.get(target);
if (dep) {
dep.forEach((key) => {
effect.run();
});
}
}
}

### 步骤 5：使用 track 和 trigger 函数来实现响应式系统

现在，我们可以使用 `track` 和 `trigger` 函数来实现响应式系统。

const data = reactive({
name: 'John Doe'
});

const effect = effect(() => {
console.log(data.name);
});

data.name = 'Jane Doe';

这段代码首先创建一个名为 `data` 的响应式对象，其中包含一个名为 `name` 的属性。`data.name` 的值是 `John Doe`。然后，创建一个名为 `effect` 的副作用函数，该函数将 `data.name` 的值打印到控制台。最后，将 `data.name` 的值更改为 `Jane Doe`。

当 `data.name` 的值发生变化时，Vue3 会调用 `trigger` 函数来触发 `data.name` 的 `ReactiveEffect` 对象的 `deps` 属性中存储的所有视图或组件的更新。这将导致 `effect` 函数被调用，并将 `data.name` 的新值打印到控制台。

## 总结

通过逐步构建 Vue3 的响应式原理，您应该对 Vue3 的响应式系统有了更深入的理解。您现在可以尝试自己实现一个简单的 Vue3 响应式系统，或