watchEffect 举例子

watchEffect是Vue 3中的一个响应式API，它用于监听响应式数据的变化并执行相应的副作用函数。当被监听的响应式数据发生变化时，watchEffect会自动执行副作用函数。

watchEffect的使用方式非常简单，只需要将要监听的响应式数据和副作用函数作为参数传入即可。例如：

import { reactive, watchEffect } from 'vue';

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

watchEffect(() => {
  console.log('count发生变化了：', state.count);
});

// 修改count的值
state.count = 1; // 输出：count发生变化了：1
state.count = 2; // 输出：count发生变化了：2

在上面的例子中，我们创建了一个响应式对象state，并使用watchEffect监听了state.count的变化。每当state.count发生变化时，副作用函数就会被执行，并输出相应的变化值。

watchEffect还支持返回一个清理函数，用于在组件销毁时清理副作用。例如：

import { reactive, watchEffect } from 'vue';

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

const stop = watchEffect(() => {
  console.log('count发生变化了：', state.count);
});

// 修改count的值
state.count = 1; // 输出：count发生变化了：1
state.count = 2; // 输出：count发生变化了：2

// 停止监听
stop();

在上面的例子中，我们使用stop函数停止了watchEffect的监听。