深入剖析 Vue 2.x 侦听器：揭秘背后的原理

2023-12-26 06:53:39

在 Vue.js 的世界里，侦听器 (watcher) 扮演着至关重要的角色，它们时刻监视着数据的变化，并做出相应的反应。在本文中，我们将踏上一段激动人心的旅程，探索 Vue 2.x 中侦听器的内部机制。我们将深入研究侦听器的实现原理，了解其内部运作方式以及它们如何被创建和使用。

侦听器的诞生

在初始化 Vue 实例时，每个侦听器都将对应创建一个侦听器 watcher。这些侦听器 watcher 负责监视指定的数据属性，并在其值发生改变时触发回调函数。

侦听器选项

Vue 2.x 中提供了两个强大的侦听器选项：

immediate： 如果设为 true，侦听器将在创建时立即执行一次回调函数，即使初始值没有变化。
deep： 如果设为 true，侦听器将采用深度监视模式，这意味着它将递归监视对象和数组的嵌套属性。

侦听器的内部实现

让我们深入探讨侦听器的内部实现，了解它们如何将变化的响应式数据转换为触发动作：

Dep 依赖收集： 侦听器 watcher 通过 Dep 类收集它所依赖的响应式属性。
调度更新： 当依赖项发生变化时，Dep 会通知侦听器 watcher。
更新队列： 侦听器 watcher 将自己添加到更新队列中。
执行回调： 在下一个事件循环中，Vue 将遍历更新队列，执行所有侦听器 watcher 的回调函数。

示例：揭秘侦听器选项

为了更深入地理解侦听器选项，让我们看一个示例：

export default {
  data() {
    return {
      count: 0,
    };
  },
  watch: {
    count: {
      handler(newValue, oldValue) {
        // 侦听 count 属性的变化
      },
      immediate: true, // 立即执行回调
      deep: true, // 深度监视 count 对象
    },
  },
};