watchEffect 用法

watchEffect 是 Vue 3 中新增的一个函数，用于侦听响应式数据的变化，并在每次数据变化时执行相应的副作用函数。

watchEffect 接受一个副作用函数作为参数，并立即执行该函数。副作用函数中可以访问到响应式数据，并且在数据变化时会被重新执行。

下面是 watchEffect 的基本用法示例：

import { watchEffect, reactive } from 'vue';

const state = reactive({
  count: 0
});

watchEffect(() => {
  console.log(`Count: ${state.count}`);
});

// 修改 count 的值，会触发 watchEffect 中的副作用函数
state.count++; // 输出：Count: 1
state.count++; // 输出：Count: 2

在上述示例中，我们创建了一个名为 state 的响应式对象，其中包含一个 count 属性。然后，我们使用 watchEffect 监听 count 的变化，并在每次变化时打印 count 的值。

注意，watchEffect 是自动追踪响应式数据的改变，并在数据发生变化时自动调用副作用函数。因此，无需显式地指定依赖项。这使得我们能够更方便地编写响应式代码。

除了基本用法外，watchEffect 还提供了一些高级用法，例如配置项（比如 flush、onTrack、onTrigger 等），可以根据实际需求进行配置。具体的用法可以参考 Vue 3 的官方文档。