Vue 原理：依赖收集之基本数据类型源码版

前端

2023-12-13 13:56:12

欢迎来到我们的 Vue 原理探索之旅！今天，我们深入研究依赖收集的机制，特别是当涉及到基本数据类型时。

依赖收集基础

在 Vue 中，我们使用响应式系统来追踪数据的变化，并自动更新视图。当数据发生变化时，Vue 依赖收集系统负责识别哪些组件或视图需要更新。

收集依赖项

在收集依赖项时，Vue 会执行以下步骤：

追踪数据访问： 当组件访问数据时，Vue 会将组件对应的 Watcher 添加到数据的依赖项列表中。
设置 Dep.target： 在触发数据变化之前，Vue 会将 Dep.target 设置为当前的 Watcher，以指示哪个 Watcher 正在收集依赖项。
存储依赖项： 当数据变化时，Vue 将触发依赖项列表中存储的所有 Watcher，以便它们更新视图。

基本数据类型

对于基本数据类型（如字符串、数字和布尔值），Vue 的依赖收集机制有所不同。这是因为基本数据类型在内存中存储在不同位置，并且无法直接观察到它们的更改。

在 Vue 中，对于基本数据类型，依赖项收集机制会使用一个名为 跟踪观察者（Tracker Observer） 的特殊观察者。Tracker Observer 监视基本数据类型，并当它们发生变化时触发依赖项。

源码示例

让我们用一个简单的示例代码来说明这个过程：

// 数据
let name = "John";

// 组件
const App = {
  data() {
    return { name };
  },
  template: `<div>{{ name }}</div>`,
};

// 创建 Vue 实例
const app = new Vue(App);

// 更改数据
app.name = "Jane";

在上面的示例中：

依赖项收集： 当组件访问 app.name 数据时，Vue 将组件的 Watcher 添加到 name 依赖项列表中。
追踪观察者： Vue 创建一个 Tracker Observer 监视 name 数据。
依赖项触发： 当 app.name 更改时，Tracker Observer 触发 name 依赖项列表中存储的 Watcher。这会导致组件重新渲染，更新视图中的 name 值。