最核心的停止方式是调用 watcheffect 返回的 stop 函数；可赋值变量后手动调用，或在 onunmounted 中自动清理；异步场景用 oncleanup 取消上一次任务；vue 3.5+ 支持 pause/resume 临时控制。

直接调用 watchEffect 返回的函数即可停止副作用执行——这是最核心、最可靠的方式。

拿到并立即使用 stop 函数

watchEffect 执行后会返回一个可调用的清理函数，通常命名为 stop。只要把它存下来，后续随时调用就能终止监听：

• 基础写法：赋值给变量，需要时执行

const stop = watchEffect(() => { console.log('count:', count.value) })
stop() // 立即停止，不再响应 count 变化

• 在特定逻辑中触发停止，比如弹窗关闭、表单提交完成、条件达成后

const stop = watchEffect(() => { fetchData() })
onUnmounted(() => stop()) // 推荐在组件卸载时清理

在组件生命周期中自动清理

虽然 Vue 会在组件卸载时自动清理 watchEffect，但显式绑定到生命周期钩子更安全、更可控，尤其在跨组件共享状态或自定义 Hook 中：

vue3-ant-design-vue-component-skill

封装基于 Vue 3 + Ant Design Vue 的通用业务组件，提供标准化模板与最佳实践。

下载

• 用 onUnmounted：适合绝大多数场景，确保组件真正移除 DOM 后释放资源
• 用 onBeforeUnmount：适合需同步取消请求、清除定时器等前置操作

不推荐只依赖自动清理，因为当 watchEffect 在非组件作用域（如工具函数、服务层）中创建时，Vue 不会接管其生命周期。

利用 onInvalidate 清理异步副作用

如果副作用涉及异步操作（如 API 请求、定时器），应在下一次执行前取消上一次未完成的任务，避免竞态问题：

• 通过 onCleanup 参数注册清理函数，它会在副作用重新执行前被调用

watchEffect((onCleanup) => {
  const { response, cancel } = fetchUser(id.value)
  onCleanup(cancel) // id 变化时自动取消上一次请求
  data.value = response
})

暂停与恢复（Vue 3.5+）

如果只是临时禁用监听，而非彻底销毁，可用 pause 和 resume：

• pause()：数据照常更新，但回调不执行
• resume()：立即用当前最新值触发一次回调

const { pause, resume } = watchEffect(() => { search() })
pause() // 输入框失焦时暂停搜索
resume() // 获得焦点后恢复监听

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