深入浅出剖析Vue3中的watch：全面指南

2023-10-29 00:34:38

前言

在Vue3中，watch是一个强大的工具，它允许我们在数据发生变化时执行某些操作。这对于构建响应式应用程序非常有用，因为我们可以使用watch来更新UI、触发事件或执行其他任务。

watch的用法

watch函数的基本用法如下：

watch(source, callback, options)

source：要监视的数据源。它可以是任何Vue响应式对象，例如data属性、计算属性或store中的状态。
callback：当数据源发生变化时要执行的回调函数。
options：可选参数，用于配置watch的行为。

常见的用法方式

方式一：直接使用

watch(source, callback)

这种方式是最简单的，当数据源发生变化时，回调函数就会被触发。例如，以下代码监听count变量的变化，并在每次变化时输出新的值：

watch(count, (newValue, oldValue) => {
  console.log(`New value: ${newValue}, Old value: ${oldValue}`)
})

方式二：使用对象语法

watch({
  source: source,
  handler: callback,
  options: {}
})

这种方式更加灵活，它允许我们为watch指定更多的选项。例如，我们可以指定是否在初始化时立即执行回调函数，或者只在数据源发生变化时执行回调函数。

watch({
  source: count,
  handler: (newValue, oldValue) => {
    console.log(`New value: ${newValue}, Old value: ${oldValue}`)
  },
  immediate: true, // 立即执行回调函数
  deep: true // 深度监控数据源的变化
})

方式三：使用装饰器

@watch(source)
callback(newValue, oldValue)

这种方式是最简洁的，它允许我们在类组件中使用watch。例如，以下代码监听count变量的变化，并在每次变化时输出新的值：

@watch('count')
countChanged(newValue, oldValue) {
  console.log(`New value: ${newValue}, Old value: ${oldValue}`)
}

watch的常见应用场景

watch有许多常见的应用场景，包括：

更新UI：当数据源发生变化时，我们可以使用watch来更新UI。例如，我们可以使用watch来监听表单输入的变化，并在输入发生变化时更新表单的错误提示。
触发事件：当数据源发生变化时，我们可以使用watch来触发事件。例如，我们可以使用watch来监听用户登录状态的变化，并在用户登录或注销时触发相应的事件。
执行其他任务：当数据源发生变化时，我们可以使用watch来执行其他任务。例如，我们可以使用watch来监听购物车中的商品数量的变化，并在商品数量发生变化时更新购物车总价。