vue3中的watch 如何使用呢

在Vue3中，watch的使用方式与Vue2有所不同。Vue3中的watch可以通过`watch`函数来创建一个监听器，其语法如下：

watch(source, callback, options?)

其中，`source`可以是一个响应式数据对象、一个计算属性或一个返回响应式数据对象的函数。`callback`是一个回调函数，用于处理数据变化时的逻辑。`options`是一个可选的配置对象，用于配置监听器的行为。

下面是一个监听响应式数据对象的例子：

import { ref, watch } from 'vue'

const count = ref(1)

watch(count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue)
})

在上面的例子中，我们使用`ref`函数创建了一个响应式数据对象`count`，并使用`watch`函数创建了一个监听器，用于监听`count`的变化。当`count`的值发生变化时，回调函数会被触发，输出新旧值。

除了监听响应式数据对象，我们还可以监听计算属性或返回响应式数据对象的函数。下面是一个监听计算属性的例子：

import { computed, watch } from 'vue'

const count = ref(1)
const double = computed(() => count.value * 2)

watch(double, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue)
})

在上面的例子中，我们使用`computed`函数创建了一个计算属性`double`，并使用`watch`函数创建了一个监听器，用于监听`double`的变化。当`double`的值发生变化时，回调函数会被触发，输出新旧值。

除了上述基本用法外，`watch`函数还支持一些高级配置，例如`deep`、`immediate`和`flush`等。这些配置可以通过`options`参数进行设置。下面是一个使用高级配置的例子：

import { ref, watch } from 'vue'

const obj = ref({ count: 1 })

watch(
  obj,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue)
  },
  {
    deep: true,
    immediate: true,
    flush: 'sync'
  }
)

在上面的例子中，我们使用`ref`函数创建了一个响应式数据对象`obj`，并使用`watch`函数创建了一个监听器，用于监听`obj`的变化。我们通过`options`参数设置了`deep`、`immediate`和`flush`等高级配置，用于深度监听、立即执行回调函数和同步执行回调函数。