watchEffect 参数

### Vue 3 `watchEffect` 参数详解

#### 函数签名
`watchEffect` 接受一个函数作为其唯一参数，该函数会在响应式依赖发生变化时重新执行。此函数可以返回一个清理函数，在每次副作用被新的运行取代之前调用。

import { ref, watchEffect } from 'vue';

const count = ref(0);

// 定义带有清理逻辑的副作用函数
watchEffect((onInvalidate) => {
    let timer;
    
    // 执行副作用操作
    console.log(`Count is: ${count.value}`);
  
    // 设置定时器模拟异步任务
    timer = setTimeout(() => {
        console.log('Timer finished');
    }, 1000);
  
    // 注册清理回调
    onInvalidate(() => {
      clearTimeout(timer);
      console.log('Invalidation callback called and timer cleared');
    });
});

当传入给 `watchEffect` 的函数被执行时，会接收一个名为 `onInvalidate` 的钩子函数作为参数[^1]。这个钩子允许注册一些在当前副作用即将失效前需要执行的操作，比如取消网络请求或清除计时器等资源释放工作。

通过上述方式定义的副作用将在组件挂载时立即触发一次，并且每当监听到的数据源发生改变时自动重复执行。如果存在多个数据源，则只有其中一个变化也会导致整个副作用重新计算并可能触发相应的清理机制。