深层次剖析 Vue.js watch 源代码，揭秘响应式监听的奥秘

前端

2023-11-30 13:02:06

Vue.js 的 watch API 是一项强大的工具，它允许您在数据发生变化时执行某些操作。这在构建交互式和动态的 Web 应用程序时非常有用。在本文中，我们将深入剖析 Vue.js watch 源代码，揭秘它的内部运作机制。

watch 源码分析

watch 的源代码位于 src/core/instance/state.js 文件中。它是一个名为 $watch 的方法，它接受两个参数：

expOrFn：要侦听的数据属性或一个函数
handler：当数据属性发生变化时要调用的回调函数

watch 方法首先会检查 expOrFn 是一个属性还是一个函数。如果是属性，它将使用 createComputedGetter 函数创建一个计算属性，该计算属性将返回该属性的值。如果是函数，它将直接使用该函数作为回调函数。

接下来，watch 方法会创建一个新的侦听器对象，该对象包含以下属性：

vm：Vue 实例
expOrFn：要侦听的数据属性或函数
handler：当数据属性发生变化时要调用的回调函数
deep：指示是否对对象进行深度侦听
immediate：指示是否在组件创建时立即调用回调函数

最后，watch 方法将侦听器对象添加到组件的 _watchers 数组中。

watch 的使用方式

您可以通过以下方式使用 watch API：

// 侦听一个数据属性
vm.$watch('counter', function (newVal, oldVal) {
  // 当 counter 属性发生变化时执行此回调函数
});

// 侦听一个计算属性
vm.$watch(() => this.counter + 1, function (newVal, oldVal) {
  // 当 counter + 1 的值发生变化时执行此回调函数
});

// 使用深度侦听侦听一个对象
vm.$watch('obj', function (newVal, oldVal) {
  // 当 obj 对象的任何属性发生变化时执行此回调函数
}, {
  deep: true
});

// 在组件创建时立即调用回调函数
vm.$watch('counter', function (newVal, oldVal) {
  // 当 counter 属性发生变化时执行此回调函数
}, {
  immediate: true
});