watchEffect在setup中声明会随组件卸载自动停止；若在onMounted、独立effectScope或组合式函数中使用，则需手动stop，否则可能内存泄漏。
Vue.js 的 watchEffect 在动态组件（如配合 <component :is="..."/> 或路由切换）中，**不会自动卸载**——它的清理行为完全依赖于其所在的响应式作用域（effect scope）是否被销毁，而不是组件本身的挂载/卸载状态。
watchEffect 的生命周期绑定逻辑
watchEffect 本质上是一个副作用函数，它会自动追踪内部使用的响应式数据，并在下一次执行前调用上一次返回的清理函数（如果有的话）。但它本身不感知组件生命周期。是否被“卸载”，取决于它被定义在哪个作用域中：
- 若在
setup()中直接调用，它会绑定到当前组件实例的 effect scope，组件 卸载时自动停止并清理（Vue 3.2+ 默认行为） - 若在
onBeforeMount等钩子中调用，或手动创建了独立effectScope()，则需手动stop()，否则可能造成内存泄漏 - 若在组合式函数（composable）中定义但未正确绑定到组件作用域（例如脱离 setup 执行），它将无法随组件卸载而停止
动态组件切换时的常见陷阱
使用 <component :is="currentComp"></component> 切换组件时，旧组件实例会被销毁，新组件重新创建。此时：
- 旧组件内的
watchEffect（只要是在其 setup 中声明）会随组件卸载而自动 stop —— 这是安全的 - 但如果把
watchEffect写在父组件中、用来监听子组件暴露的 prop 或事件总线式状态，它会持续运行，即使子组件已切换 —— 此时需结合watch的immediate和条件判断，或用v-if控制作用域 - 若在
watchEffect内启动了定时器、WebSocket、addEventListener 等外部资源，务必在清理函数中关闭，否则资源残留
确保自动卸载的推荐写法
在组件 setup() 中直接使用是最稳妥的方式：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
setup() {
const count = ref(0)
watchEffect((onCleanup) => {
console.log('count changed:', count.value)
// 模拟异步副作用
const timer = setTimeout(() => {
console.log('timeout done')
}, 1000)
// 清理函数：组件卸载或 effect 重跑时执行
onCleanup(() => {
clearTimeout(timer)
console.log('cleanup triggered')
})
})
return { count }
}
这段代码中的 watchEffect 会随组件卸载自动停止，且每次 count 变化时先清理上一轮副作用，再执行新逻辑。
需要手动管理的例外场景
以下情况需显式控制 watchEffect 生命周期：
- 在
onMounted中调用（绕过了 setup 作用域绑定）→ 应改用onBeforeUnmount配合stop() - 在可复用的 composable 中返回
watchEffect→ 建议接收一个onInvalidate回调，或要求调用方传入effectScope - 跨组件共享状态监听（如 Pinia store）→ 通常无需手动 stop，因为 store 实例寿命长于组件；但若监听的是组件局部 ref，仍需注意作用域
