vue3中watch的用法

在Vue3中，watch的用法与Vue2有些不同。Vue3中，可以使用watchEffect和watch两种方式进行数据监听。

1. watchEffect

watchEffect可以监听响应式数据的变化，并在响应式数据变化时执行回调函数。它的使用方式如下：

import { watchEffect } from 'vue'

watchEffect(() => {
  // 监听的响应式数据或表达式
  console.log(myData.value)
})

需要注意的是，watchEffect会立即执行一次回调函数。

2. watch

watch可以监听特定的响应式数据，并在数据变化时执行回调函数。它的使用方式如下：

import { watch } from 'vue'

watch(myData, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

需要注意的是，watch的第一个参数必须是一个响应式数据，第二个参数是回调函数，其参数依次为新值和旧值。如果要监听多个响应式数据，可以使用数组的方式传递多个响应式数据。

除此之外，watch还可以接收第三个参数options对象，用于配置监听选项，例如：

import { watch } from 'vue'

watch(myData, (newValue, oldValue) => {
  console.log(newValue, oldValue)
}, { immediate: true })

options对象中可以配置的选项还包括：deep、flush、onTrack、onTrigger、lazy等。具体的使用方式可以参考Vue3官方文档。