聊聊 Observer、Dep、Watcher 的区别

2023-11-20 08:07:50

Vue.js 响应式系统的基石：Observer、Dep 和 Watcher

引言

Vue.js，一个极受欢迎的 JavaScript 框架，凭借其卓越的响应式系统备受推崇。响应式系统负责在数据变化时自动更新视图，从而显著提升用户体验和开发效率。了解 Observer、Dep 和 Watcher 这三个关键概念对于透彻理解 Vue.js 的响应式机制至关重要。

Observer：数据监视哨

Observer，如其名，扮演着监视数据变化的哨兵角色。它通过 Object.defineProperty() 方法将普通数据对象转换成拥有 getter 和 setter 的响应式对象。每当数据被访问或修改，getter 和 setter 就会被触发，从而通知 Observer 数据已发生改变。

为了追踪数据变化，Observer 在 getter 和 setter 中记录下所有依赖于该数据的 Watcher（观察者）。稍后，当数据发生变化时，Observer 就会向这些 Watcher 发出通知。

Dep：依赖收集器

Dep，顾名思义，是一个依赖收集器，负责收集所有依赖于特定数据对象的 Watcher。当一个新的 Watcher 被创建并关联到一个数据对象时，Dep 会将这个 Watcher 添加到其内部数组中。这样，Observer 就能够轻松地通知所有依赖于该数据的 Watcher。

Watcher：视图更新器

Watcher，一种观察者模式的具体实现，负责在数据变化时更新视图。当 Watcher 被创建时，它会将一个回调函数注册到 Dep。每当 Dep 检测到数据变化并通知 Watcher 时，Watcher 的回调函数就会被触发，从而重新渲染受影响的视图。

三者的协作

Observer、Dep 和 Watcher 协同工作，构成 Vue.js 响应式系统的基石。当数据发生变化时，Observer 会通知 Dep，Dep 随后通知所有依赖于该数据的 Watcher，最终触发 Watcher 重新渲染视图。

代码示例

以下是一个简单的代码示例，展示了 Observer、Dep 和 Watcher 如何协作：

// 创建一个响应式数据对象
const data = Vue.observable({
  count: 0
})

// 创建一个 Watcher，监听 data.count 的变化
const watcher = Vue.watch(data, () => {
  console.log(`count changed to: ${data.count}`)
})

// 修改 data.count
data.count++

// 输出: "count changed to: 1"