返回

Vue 的 Watch 机制深入解析

前端

Vue.js 的 watch 机制是数据监听的利器，当监听的属性发生变化时，就会触发回调，从而实现响应式更新。watch 在业务中非常常用，也是面试的必问知识点，通常会与 computed 进行比较。

本文将带你从源码角度理解 watch 的工作流程，深入探讨依赖收集和深度监听的实现。为了更好地理解，我们将使用通俗易懂的示例代码来辅助说明。

一、watch 的工作流程

watch 的工作流程大致分为以下几个步骤：

  1. 定义 watch 监听器： 通过 Vue 实例的 watch 选项或组件的 watch 属性来定义 watch 监听器。
  2. 依赖收集： 当 watch 监听器被定义后，Vue 会在模板中收集与该监听器相关的所有依赖项。当这些依赖项发生变化时，watch 监听器就会被触发。
  3. 触发回调： 当依赖项发生变化时，watch 监听器就会触发回调函数，从而执行相应的操作。

二、依赖收集的实现

依赖收集是 watch 机制的重要组成部分，它用于追踪 watch 监听器所依赖的数据项，以便在这些数据项发生变化时触发回调。依赖收集主要通过以下几个步骤实现：

  1. 创建 Watcher 对象： 当 watch 监听器被定义后，Vue 会创建一个 Watcher 对象来管理该监听器。
  2. 添加依赖项： 在 Watcher 对象被创建后，Vue 会遍历模板，收集与该监听器相关的所有依赖项，并将其添加到 Watcher 对象的依赖项列表中。
  3. 监听依赖项的变化： Vue 会对 Watcher 对象的依赖项进行监听，当这些依赖项发生变化时，就会触发 Watcher 对象的回调函数。

三、深度监听的实现

深度监听是指 watch 监听器不仅可以监听自身的数据变化，还可以监听其子属性的数据变化。深度监听主要通过以下几个步骤实现：

  1. 创建 Observer 对象： 当 Vue 实例或组件被创建时，会创建一个 Observer 对象来管理该实例或组件的数据。
  2. 递归添加依赖项： 当 Observer 对象被创建后，Vue 会递归遍历数据对象，为每个数据属性添加一个依赖项。
  3. 触发回调： 当数据属性发生变化时，Observer 对象会触发其对应的依赖项，从而触发 Watcher 对象的回调函数。

四、示例代码

为了更好地理解 watch 的工作原理，我们来看一个示例代码：

const vm = new Vue({
  data: {
    count: 0
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count has changed from ${oldVal} to ${newVal}`);
    }
  }
});

vm.count++; // 输出: count has changed from 0 to 1

在这个示例中，我们定义了一个 Vue 实例 vm，并在其 data 选项中定义了一个数据属性 count。我们还定义了一个 watch 监听器，当 count 属性发生变化时，就会触发回调函数。

当我们运行这段代码时，控制台会输出 "count has changed from 0 to 1"，这表明 count 属性发生了变化，watch 监听器被触发，并执行了回调函数。

五、总结

通过本文，我们对 Vue.js 中的 watch 机制有了更深入的了解。我们分析了 watch 的工作流程，深入探讨了依赖收集和深度监听的实现，并通过示例代码展示了 watch 的使用方式。希望这些内容能够帮助你更好地掌握 watch 机制，以便更好地应用它来构建复杂的 UI 交互。