Vue.js：深入探索 3.0 中 Reactivity 的奥秘

见解分享

2024-02-07 00:44:39

Vue.js 中的 Reactivity：重新定义响应式编程

Vue.js 3.0 中引入了革命性的 Reactivity 系统，彻底改变了我们与数据交互的方式。Reactivity 的核心在于一个精心设计的系统，它利用 Proxy 和 Deps 机制，无缝跟踪数据的变化并触发响应更新。

Proxy：观测数据变化的哨兵

Proxy 对象是 Reactivity 系统的关键组成部分。它充当数据变化的监视者，当底层数据发生变化时，它会发出通知。Vue.js 利用 Proxy 来包裹响应式数据对象，从而在数据发生变化时自动触发依赖项的重新计算。

Deps：依赖项的协调者

Deps 充当协调器，跟踪响应式对象与依赖项之间的关系。每个响应式对象都维护一个 Deps 实例，其中存储了所有依赖于该对象的观察者（例如组件或计算属性）。当响应式对象发生变化时，Deps 会通知所有注册的观察者，触发它们的更新。

Vue Watcher：响应式更新的执行者

Vue Watcher 是 Reactivity 系统中另一个至关重要的组件。Watcher 负责执行响应式更新。它连接到一个响应式对象并监听其变化。当对象发生变化时，Watcher 会触发相应的更新，例如重新渲染组件或更新计算属性。

示例：剖析 Reactivity 的实际应用

让我们通过一个简单的示例来说明 Vue.js 3.0 中 Reactivity 的工作原理：

// 定义响应式对象
const person = Vue.reactive({ name: 'John', age: 30 });

// 创建一个依赖于 person.name 的计算属性
const fullName = computed(() => person.name + ' Doe');

// 观察 person.name 的变化
watch(person.name, (newValue, oldValue) => {
  // 当 person.name 发生变化时执行
});

// 更新 person.name
person.name = 'Jane';