vue watch 组合式api使用详细

Vue 3中新增了一个叫做“组合式API”的特性，它可以让我们更加方便地组织和复用代码。其中一个非常实用的功能是`watch`，它可以监听一个数据的变化并在变化时触发一些操作。

下面是一个使用`watch`的例子：

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`)
    })

    return {
      count
    }
  }
}

在上面的代码中，我们定义了一个`count`变量，它是一个响应式的变量。我们使用`watch`函数来监听这个变量的变化，并在变化时打印出变化前后的值。

需要注意的是，`watch`函数的第一个参数可以是一个响应式的变量，也可以是一个返回响应式变量的函数。例如：

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)

    watch(
      () => doubleCount.value,
      (newValue, oldValue) => {
        console.log(`doubleCount changed from ${oldValue} to ${newValue}`)
      }
    )

    return {
      count
    }
  }
}

在上面的代码中，我们定义了一个`doubleCount`变量，它是一个计算属性，它的值是`count`的两倍。我们使用`watch`函数来监听`doubleCount`的变化，并在变化时打印出变化前后的值。需要注意的是，我们将`doubleCount`包装在一个返回响应式变量的函数中，这样`watch`函数就可以正确地监听到`doubleCount`的变化了。

除了上面的例子，`watch`函数还支持很多其他的用法，例如：

- 监听多个变量的变化
- 使用`immediate`选项来立即执行回调函数
- 使用`deep`选项来监听对象或数组的深层变化

总之，`watch`函数非常实用，可以让我们方便地监听和处理数据的变化。如果你想了解更多关于`watch`函数的用法，请参考Vue 3的官方文档。