vue 3 中侦听器默认在组件卸载时自动停止，但仅限于 或 setup() 内创建；脱离组件作用域需手动调用 stop()，推荐配合 onunmounted 清理，一次性监听可在回调内调用 stop()，vue 3.5+ 支持 pause/resume 临时冻结。
Vue 3 中，侦听器（watch 和 watchEffect）在组件卸载时默认会自动停止，但这个自动清理仅适用于在 <script setup></script> 或 setup() 函数内直接创建的监听器。一旦监听器脱离组件作用域（比如在 composable、工具函数、全局状态管理中创建），就必须手动停止，否则容易引发内存泄漏或重复执行副作用。
下面分几种常见场景说明如何确保侦听器被正确停止：
组件内使用：推荐显式绑定 onUnmounted
虽然 Vue 会在组件卸载时自动调用 stop()，但为逻辑清晰、兼容第三方库或跨生命周期操作，建议主动配合生命周期钩子：
- 使用
onUnmounted（最常用）：import { watch, onUnmounted } from 'vue'
const stop = watch(count, (val) => { console.log('count changed:', val) })
onUnmounted(() => stop())
- 若需在 DOM 移除前同步清理资源（如取消请求、清除定时器），可用 `onBeforeUnmount`：
```js
import { onBeforeUnmount } from 'vue'
const timer = setInterval(() => { /* ... */ }, 1000)
onBeforeUnmount(() => clearInterval(timer))
非组件作用域：必须手动保存并调用 stop
在自定义 Hook、服务层、或非 setup 内创建的监听器，Vue 不会自动管理其生命周期：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
// utils/watcher.js
export function createSearchWatcher(searchText, fetchFn) {
const stop = watch(searchText, (val) => {
if (val) fetchFn(val)
})
return { stop }
}
// 在组件中使用后，记得手动清理
const { stop } = createSearchWatcher(searchText, fetchSuggestions)
onUnmounted(stop)
一次性监听或条件停止：在回调内调用 stop
适合“监听到某个值就退出”的场景，例如初始化加载后不再响应：
const stop = watch(data, (val) => {
if (val && val.id) {
loadData(val.id)
stop() // 立即终止，避免后续触发
}
})
⚠️ 注意：stop() 必须在监听器已激活后调用，不能写在回调外层，否则监听器还没建立就执行了。
Vue 3.5+ 新增：暂停与恢复（不销毁状态）
如果只是临时冻结监听（比如表单输入防抖期间、加载中禁用响应），可用 pause / resume：
const { pause, resume } = watch(searchText, (val) => {
fetchResults(val)
})
pause() // 暂停：数据照常更新，但不触发回调
resume() // 恢复：立即用当前值触发一次
这种方式不会丢失监听上下文，也不需要重建监听器，适合 UI 流程控制。
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
