Vue 3 深度剖析：watch API

2023-10-01 22:01:39

用 watch 和 watchEffect 掌握 Vue.js 3 的响应式变化

深入探究 Vue.js 3 的响应式 API

在 Vue.js 的强大生态系统中，响应式 API 扮演着至关重要的角色，使我们能够构建动态且响应迅速的应用程序。我们已经领略了 ref、reactive、effect 和 computed 等利器，而今天，让我们把目光投向另一个关键 API —— watch，深入挖掘它的奥秘。

watch API：监控响应式数据的变化

watch API 赋予我们监视特定数据结构或属性变化的能力，并让我们在变化发生时执行相应的处理程序。这在各种场景中都非常有用，例如：

对用户输入做出响应
跟踪状态变化
在数据更新时触发副作用

watch 的工作原理

watch 函数需要两个参数：

监视目标 (watchTarget)： 需要监视的数据结构或属性。
回调函数 (handler)： 数据更新时要执行的函数。

当监视目标发生改变时，watch 会自动执行回调函数。回调函数可以包含以下类型的代码：

更新其他数据
发出事件
执行网络请求
修改 DOM

示例：监视一个计数器的变化

让我们通过一个示例来理解 watch 的用法：

const vm = Vue.createApp({
  data() {
    return {
      count: 0,
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`count has changed from ${oldValue} to ${newValue}`)
    },
  },
}).mount('#app')

在这个示例中，watch API 被用于监视 count 属性的变化。当 count 属性更新时，回调函数会被触发，并在控制台中打印出 count 的旧值和新值。

其他选项：定制 watch 行为

watch API 还提供了以下可选选项：

immediate (布尔值)： 指示是否在初始化时立即调用回调函数。默认为 false。
deep (布尔值)： 指示是否对监视目标进行深度监视（即监视嵌套对象和数组）。默认为 false。

watchEffect：一种更简单的替代方案

在某些情况下，watchEffect API 可以作为 watch 的一种更简单的替代方案。watchEffect 接受一个函数作为参数，该函数在任何响应式数据更新时都会执行。与 watch 不同的是，watchEffect 不需要指定监视目标，它会自动跟踪所有响应式数据的变化。

何时使用 watch 或 watchEffect

一般而言，建议在以下情况下使用 watch：