watcheffect 必须显式调用返回的 stop 函数才能终止监听，防止内存泄漏；可在组件卸载时用 onunmounted 清理，或在回调中条件调用 stop() 实现一次性监听。
Vue 3 中 watchEffect 不会自动停止监听，必须显式调用它返回的 stop 函数 才能终止响应式追踪和后续回调执行。这是防止内存泄漏的关键操作。
获取并调用 stop 函数
watchEffect 执行后立即返回一个函数，保存它即可随时调用：
- 赋值给常量或响应式变量：const stop = watchEffect(() => { /* 副作用逻辑 */ })
- 调用后监听立即失效：stop() —— 此后依赖变化不再触发回调
- 可重复调用，安全无副作用：多次执行 stop() 不会报错，仅第一次生效
在组件卸载时自动清理
推荐结合生命周期钩子，在组件移出 DOM 前统一释放监听：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 使用 onUnmounted（组件已从 DOM 移除后）：onUnmounted(() => stop())
- 若需同步中断异步任务（如取消请求、清除定时器），改用 onBeforeUnmount
- 不建议依赖 Vue 自动清理 —— 组合式 API 中 watchEffect 不会自动解绑，无论是否写在 setup 内
在回调中条件性停止
可在 watchEffect 的回调内部直接调用 stop()，实现按状态终止：
- 适合“一次性监听”或阈值控制，例如：if (count.value >= 5) stop()
- 注意不能在回调外层直接写 stop()，否则监听器尚未建立就已终止
- 异步逻辑中调用前建议加存在性判断：if (stop) stop()
与其他监听器的 stop 行为一致
watchEffect 的 stop 和 watch 返回的 stop 功能完全相同，都是立即切断响应式连接：
- 区别在于依赖收集方式：watchEffect 自动追踪，watch 需显式指定源
- 两者都支持清理中间副作用（如防抖取消、请求中止），但最直接的终止方式就是调用 stop
- 动态切换监听时，应先调用旧 stop()，再创建新监听，避免叠加
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
