vue3的watch用法

在Vue 3中，watch的用法与Vue 2有一些差异。在Vue 3中，你可以使用`watch`函数来响应数据的变化。`watch`函数接收两个参数：要侦听的数据源和回调函数。当数据源发生变化时，回调函数将被调用。此外，你还可以使用`watch`函数的第三个参数来设置选项。

下面是Vue 3中watch的用法示例：

import { watch } from 'vue';

watch(data, (newVal, oldVal) => {
  // 回调函数逻辑
});

在这个示例中，我们使用`watch`函数来侦听名为`data`的数据源。当`data`发生变化时，回调函数将被调用，并且会传入新值`newVal`和旧值`oldVal`。

除了基本的用法，Vue 3的`watch`函数还提供了其他选项，例如：
- `immediate`：设置为`true`时，会在初始渲染时立即触发回调函数。
- `deep`：设置为`true`时，会深度侦听数据源的变化。
- `flush`：设置回调函数的触发时机，可选值有`'pre'`、`'post'`和`'sync'`。

下面是一个使用选项的示例：

import { watch } from 'vue';

watch(data, (newVal, oldVal) => {
  // 回调函数逻辑
}, {
  immediate: true,
  deep: true,
  flush: 'post'
});

在这个示例中，回调函数将在初始渲染时立即触发，深度侦听数据源的变化，并且在Vue更新之后触发。