用 Vue3 watch 轻松掌控数据响应

Vue.js 3 中引入了 watch API，它是一种强大的工具，可以让你监听数据变化并做出相应的响应。本指南将深入探讨 watch 的工作原理，并提供一些实际示例来展示它的用法。

了解 watch 的原理

watch API 允许你为特定数据属性或表达式定义一个回调函数。当被监视的数据发生变化时，回调函数将被触发。通过这种方式，你可以编写代码来响应数据更新，例如更新其他数据、执行某些操作，或更新 UI。

使用 watch 的语法

watch 可以通过两种方式使用：

1. 对象形式：

watch: {
  count: {
    handler(newValue, oldValue) {
      // ...
    },
    deep: true,
    immediate: true
  }
}

2. 函数形式：

watch(
  () => { return count },
  (newValue, oldValue) => {
    // ...
  },
  { deep: true, immediate: true }
)

深入理解 watch 的选项

watch API 提供了以下选项来定制其行为：

• deep： 指定是否对对象和数组进行深度监视，以监视其内部属性的变化。
• immediate： 指定是否在组件初始化时立即触发回调函数。

实际应用中的 watch

响应表单输入：

watch: {
  userInput(newValue) {
    // 处理用户输入的变化
  }
}

根据数据更新 UI：

watch: {
  count() {
    this.$refs.counter.textContent = this.count;
  }
}

执行异步操作：

watch: {
  isAuthenticated(newValue) {
    if (newValue) {
      // 执行异步操作，例如加载用户数据
    }
  }
}

watch 与 computed 的区别

watch 和 computed 都用于响应数据变化。然而，两者之间存在一些关键差异：

• watch 监听数据变化并执行代码，而 computed 计算并返回一个值。
• computed 不会触发响应式更新，而 watch 会。
• watch 更适合执行异步操作或更新 UI，而 computed 更适合计算值。

结论

Vue3 watch API 是一个强大的工具，可以轻松监听数据变化并做出响应。通过理解其原理和使用选项，你可以有效地利用 watch 来增强你的 Vue 应用程序的响应能力和交互性。