Vue 3 中 watch 监听器仅在 setup 顶层同步创建时自动卸载，异步创建、自定义 Hook、全局对象监听等场景需手动清理；推荐用 onUnmounted 显式调用 stop()，紧急资源释放则用 onBeforeUnmount。
Vue 3 中 watch 监听器**在组件内同步创建时会自动卸载**，但“自动停止”有明确前提——仅限于在 setup() 函数中直接调用、且未被异步逻辑延迟的场景。若你希望行为更可控、兼容性更强，或应对复杂情况（如动态创建、自定义 Hook），推荐显式绑定到生命周期钩子。
✅ 推荐做法：用 onUnmounted 主动清理
这是最清晰、最可靠、也最符合工程实践的方式：
- 导入
onUnmounted钩子：import { onUnmounted } from 'vue' - 调用
watch或watchEffect并保存返回的stop函数 - 在
onUnmounted中调用该函数，确保组件从 DOM 移除时监听终止
示例：
import { ref, watch, onUnmounted } from 'vue'
const count = ref(0)
const stop = watch(count, (val) => {
console.log('count changed:', val)
})
onUnmounted(() => {
stop()
})
⚠️ 注意：哪些情况不会自动清理？
Vue 的自动卸载机制不覆盖以下典型场景，必须手动处理：
立即学习“前端免费学习笔记（深入）”；
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 在
onMounted内配合setTimeout、Promise.then等异步回调中创建的监听器 - 封装在自定义 Hook（composable）中，且该 Hook 被多个组件复用或长期驻留
- 监听全局对象（如
window、document）或跨组件共享状态（如 Pinia store 中的字段） - 使用
watch监听了非响应式源（例如普通对象属性未通过 getter 访问）
? 替代方案：onBeforeUnmount（适合同步释放资源）
如果监听器关联了需要立即中断的副作用（比如正在发送的请求、运行中的定时器），建议改用 onBeforeUnmount：
- 它在组件卸载前同步执行，比
onUnmounted更早 - 能及时取消网络请求、清除
setInterval、解绑事件等
示例：
import { ref, watch, onBeforeUnmount } from 'vue'
const search = ref('')
let controller = null
const stop = watch(search, async (val) => {
if (controller) controller.abort()
controller = new AbortController()
try {
await fetch(`/api/search?q=${val}`, { signal: controller.signal })
} catch (e) {
if (e.name !== 'AbortError') throw e
}
})
onBeforeUnmount(() => {
stop()
if (controller) controller.abort()
})
? 补充：watchEffect 的特殊清理方式
除了 stop()，watchEffect 还支持内置的副作用清理机制 —— onCleanup 回调参数：
- 每次 effect 重新执行前，上一次传入的
onCleanup函数会自动调用 - 组件卸载时，最后一次注册的
onCleanup也会被执行 - 适合清理定时器、事件监听器、异步请求等中间状态
示例：
watchEffect((onCleanup) => {
const timer = setTimeout(() => {
console.log('effect executed')
}, 1000)
onCleanup(() => {
clearTimeout(timer)
})
})
不复杂但容易忽略：只要监听器不是在 setup 顶层同步创建，就别依赖“自动停止”。主动绑定 onUnmounted 是最稳妥的选择。
