剖析 Vue2.x 源码：揭秘 Dep 和 Watcher 关联的奥秘

2022-11-03 06:16:58

揭秘 Vue.js 中 Dep 和 Watcher 的密切关系

Vue.js，一个风靡前端的 JavaScript 框架，以其优雅的语法和强大的功能著称。在 Vue.js 的核心机制中，Dep 和 Watcher 两个类发挥着举足轻重的作用，共同构成响应式系统的神经网络，实现数据变化时视图的无缝更新。

依赖收集：Dep 的职责

想象一下，响应式数据就像一块巨大的蛋糕，每个 Watcher 都代表一个饥饿的客人。为了确保每个人都能享用最新鲜的蛋糕，我们需要一种方法来追踪谁吃了蛋糕，以及哪些客人渴望品尝每一口。这就是 Dep 的用武之地。

Dep 类负责收集依赖关系，就如同蛋糕上的一个追踪器，记录着每个 Watcher 对响应式数据的依赖。当数据发生变化时，Dep 会发出信号，通知所有依赖它的 Watcher，从而触发视图的更新。

侦听数据：Watcher 的职责

Watcher 类就像一群饥肠辘辘的客人，时刻关注着蛋糕上的变化。当 Dep 发出信号，表明蛋糕已更新，Watcher 就会兴冲冲地冲上去，更新视图，让用户大饱口福。

Watcher 可以是组件实例、指令或计算属性，它们代表着需要在数据发生变化时更新的视图部分。

建立关联：Watcher 和 Dep 如何携手共进

Watcher 和 Dep 的关联就好像一场完美的舞会。当 Watcher 创建时，它会向 Dep 发送邀请函，请求加入依赖列表。Dep 欣然接受，将 Watcher 添加到其舞伴名单中。

当响应式数据发生变化时，Dep 就会发出“开场舞”的信号。Watcher 响应号召，跳上一曲更新视图的华尔兹。

代码示例

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

// 创建一个 Watcher，依赖于响应式对象
const watcher = Vue.watch(data, () => {
  console.log('数据发生变化，视图更新！')
})

// 更改响应式对象的 count 属性
data.count++