watchEffect 返回的停止函数调用后立即终止响应式监听，防止内存泄漏；可在组件卸载、条件切换、一次性监听等场景手动调用，且仅首次生效。

在 Vue 3 中，watchEffect 返回一个函数，调用它即可停止响应式监听。这是清理副作用、避免内存泄漏或重复执行的关键操作。

watchEffect 返回的停止函数怎么用？

每次调用 watchEffect 都会返回一个可执行函数，调用它就立即终止当前 effect 的自动追踪和执行：

• 该函数无参数，调用即生效
• 调用后，即使依赖的数据再变化，effect 也不会再运行
• 多次调用停止函数不会报错，但只有第一次有效（后续调用无实际作用）

什么时候必须手动停止？

以下场景建议显式调用停止函数：

• 组件卸载前：比如在 onBeforeUnmount 中停止，防止对已销毁组件的响应式更新触发错误
• 条件性启用/禁用监听：例如根据开关状态动态开启或暂停数据同步
• 一次性监听：只希望监听首次变化后就退出，可在 effect 内部调用停止函数
• 避免重复注册：在逻辑中多次调用 watchEffect 时，先停止旧的再启新的（如搜索框防抖重置监听）

常见写法示例

基础停止：

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

```js
const stop = watchEffect(() => {
  console.log('count 变了:', count.value);
});
// 手动停止
stop();
```

配合生命周期（推荐）：

```js
onMounted(() => {
  const stop = watchEffect(() => {
    api.fetchUserData(userId.value);
  });
  onBeforeUnmount(stop); // 组件卸载时自动停止
});
```

effect 内部自停（首次触发后不再监听）：

```js
const stop = watchEffect(() => {
  if (dataLoaded.value) {
    stop(); // 满足条件后立刻停止
  }
});
```

注意点

• 停止函数不是“取消当前正在执行的 effect”，而是阻止后续执行；当前回调仍会完整运行完
• 不要在 effect 函数内部反复调用 stop()（除非有明确控制逻辑），否则可能造成监听瞬间失效
• 如果使用 watch，它不直接返回停止函数，需用 watch(..., { immediate: true }) + 手动管理，而 watchEffect 更适合这类灵活控制

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！