vue 侦听器在组件卸载时是否自动清理，取决于创建方式和作用域：setup 中直接调用的 watch/watcheffect 会自动停止并释放资源；异步或动态创建、监听非响应式源、全局注册的侦听器需手动调用 stop 并在 onunmounted 中清理。
Vue 侦听器在组件卸载时的资源释放，核心取决于它如何创建、是否被 Vue 生命周期自动管理，以及是否存在外部引用。不是所有侦听器都会“自动消失”，有些必须手动干预才能避免内存泄漏。
watch 和 watchEffect 默认会自动清理
在 setup 中使用 watch 或 watchEffect 创建的侦听器，只要是在组件作用域内直接调用（比如在 onMounted 内部或顶层同步执行），Vue 会将其与当前组件实例绑定。组件卸载时，这些侦听器会被自动停止并清理 —— 它们的依赖追踪被解除，回调函数不再执行，相关闭包可被垃圾回收。
- 这是组合式 API 的默认行为，无需额外代码
- 即使侦听器内部有异步逻辑（如 setTimeout、Promise.then），只要它本身由 watch/watchEffect 返回并被 Vue 管理，清理仍有效
- 注意：若把 watch 返回的 stop 函数保存到全局变量或跨组件共享状态中，就可能绕过自动清理
动态创建的侦听器需要手动 stop
通过 this.$watch（Vue 2）或 watch(..., { immediate: true }) 以外的方式，在异步回调、事件处理、条件分支中延迟创建的侦听器，可能脱离组件的自动管理范围。例如：
- 在 setTimeout 回调里调用 watch
- 在 Promise.then 中注册 watchEffect
- 用 createApp().use(...) 注册的全局 watch（不属某组件）
这类侦听器不会被组件卸载自动清理，必须显式调用其返回的 stop 函数，并确保在 onUnmounted 钩子中执行。
监听非响应式源或外部对象时要格外小心
当 watch 监听一个普通对象、第三方库实例（如 Map、EventEmitter）、或 Vuex/Pinia store 的非响应式字段时，Vue 无法接管其变化追踪机制。此时：
- 侦听器本身可能正常工作，但组件卸载后仍持有对外部对象的引用
- 若该外部对象又反过来持有对组件方法或 ref 的引用，就会形成循环引用，阻碍内存释放
- 推荐做法：在 onUnmounted 中主动调用 stop，同时手动解绑外部对象的事件（如 emitter.off()、map.clear()）
watch 的 cleanup 机制适用于副作用函数
watch 支持在回调中接收一个 cleanup 函数参数，用于清理上一次执行留下的副作用（比如未完成的请求、定时器、DOM 插入）。这个机制和组件卸载无关，但它能防止“竞态”问题，间接提升资源安全性：
- 每次新回调执行前，自动调用上次的 cleanup
- 组件卸载时，最后一次 cleanup 也会被触发（如果存在）
- 适合处理防抖、取消请求、重置 DOM 状态等场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
