vue3 watch监听怎使用

在Vue 3中，你可以使用`watch`函数来监听数据的变化。`watch`函数接受两个参数：要监听的数据源和回调函数。当数据源发生变化时，回调函数将被触发。

以下是一个使用`watch`函数监听数据变化的示例：

import { watch } from 'vue';

watch(
  () => {
    // 数据源，可以是一个响应式数据、计算属性或 ref
    return yourData;
  },
  (newValue, oldValue) => {
    // 回调函数，在数据变化时执行
    console.log('数据发生了变化', newValue, oldValue);
  }
);

在这个示例中，我们通过`watch`函数监听`yourData`的变化，并在回调函数中打印出新值和旧值。每当`yourData`发生变化时，回调函数将被调用。

如果你只想监听一次数据的变化，可以使用`watchEffect`函数。`watchEffect`函数会立即执行一次回调函数，并在其中自动追踪依赖的数据源。

以下是一个使用`watchEffect`函数监听数据变化的示例：

import { watchEffect } from 'vue';

watchEffect(() => {
  // 回调函数，在依赖的数据变化时执行
  console.log('数据发生了变化', yourData);
});

在这个示例中，我们使用`watchEffect`函数监听`yourData`的变化，并在回调函数中打印出新值。每当`yourData`发生变化时，回调函数将被调用。

希望这个回答能够帮助到你！如有任何疑问，请随时提问。