vue3项目中watch使用

在Vue3项目中，watch侦听器用于观察数据变化并在数据变化时执行一些操作。在Vue3中，watch有两种使用方式：一种是在setup函数中使用watch函数，另一种是在组件选项中使用watch选项。

在setup函数中使用watch函数时，可以使用watch函数的返回值进行清理操作。watch函数接受两个参数：要观察的数据和回调函数。当数据改变时，回调函数将被调用。此外，还可以传递第三个参数options，用于控制监听器的行为，例如立即执行回调函数或深度监听嵌套对象中的属性。

在组件选项中使用watch选项时，可以为多个数据定义多个观察器，并在数据改变时执行相应的操作。watch选项是一个对象，其中键是要观察的数据，值是回调函数。与watch函数一样，还可以传递options参数。

下面是一个简单的例子，展示了在Vue3项目中使用watch的方式：

<script>
import { watch } from 'vue';

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

    watch(count, (newVal, oldVal) => {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    });

    return {
      count,
    }
  }
}
</script>

这个例子中，我们使用了Vue3的ref函数创建了一个响应式数据count，并在setup函数中使用watch函数观察count的变化。当count的值发生变化时，调函数会被调用并输出新旧值。

--相关问题--: