vue3--watchEffect

在 Vue 3 中，你可以使用 `watchEffect` 函数来监听响应式数据的变化，并在其变化时执行相应的副作用函数。

`watchEffect` 函数会自动追踪其内部使用的响应式数据，并在其变化时重新运行副作用函数。它不需要显式地指定要监听的数据，而是根据副作用函数内部使用的响应式数据来自动进行依赖追踪。

以下是一个示例，演示了如何使用 `watchEffect` 函数：

import { watchEffect, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
    });

    watchEffect(() => {
      console.log('Count changed:', state.count);
    });

    // 修改 state.count 的值
    state.count++; // 输出: Count changed: 1
    state.count++; // 输出: Count changed: 2

    return {
      state,
    };
  },
};

在上面的示例中，我们首先使用 `reactive` 函数创建了一个响应式对象 `state`，其中包含一个属性 `count`。

然后，我们使用 `watchEffect` 函数来监听 `state.count` 的变化，并在每次变化时输出相应的日志。

接下来，我们修改了 `state.count` 的值，并可以看到控制台输出了相应的日志。

需要注意的是，`watchEffect` 函数会在组件初始化时立即运行一次副作用函数，并进行依赖追踪。因此，在组件加载时，副作用函数会被执行一次。之后，只要副作用函数内部使用的响应式数据发生变化，副作用函数就会重新运行。

使用 `watchEffect` 函数能够方便地监听响应式数据的变化并执行相应的副作用函数，而无需手动指定监听的数据。这使得代码更加简洁和易于维护。