为什么 watch 监听路由在组件销毁后仍在执行？路由副作用的清理指南-Vue.js-PHP中文网

watch在keep-alive缓存组件中持续触发，因组件未真正卸载；需在ondeactivated中stop、onactivated中重建，或统一用ondeactivated/onunmounted清理。

为什么 watch 监听路由在组件销毁后仍在执行？路由副作用的清理指南

因为组件被 keep-alive 缓存，或未主动清理监听器，导致 watch 仍绑定在响应式依赖上，即使组件已不显示、甚至逻辑上“卸载”，它依然能被触发。

keep-alive 是最常见原因

当路由组件被 <keep-alive></keep-alive> 包裹时，组件实例不会被销毁，而是进入缓存状态（触发 onDeactivated），但其内部的 watch 仍在运行。后续再次访问该路由时，onActivated 触发，但 watch 已持续监听多轮——尤其监听 route.query 或 route.params 时，每次参数变化都会执行，造成“多次调用”“日志刷屏”“重复请求”等问题。

验证方式：在 watch 回调中打印 route.fullPath，切换路由再返回，观察是否重复执行
临时解决：移除 <keep-alive></keep-alive>，确认问题消失
推荐做法：保留缓存，但手动控制监听生命周期

监听器未在合适时机停止

Vue 确实会在组件真正卸载（unmounted）时自动清理 setup() 内创建的 watch，但这个“卸载”仅发生在组件**完全退出 DOM 且未被缓存**时。而以下情况会绕过自动清理：

watch 定义在 setup() 外部（如导出的工具函数、composable 内部未绑定生命周期）
监听源来自全局状态（如 pinia store、ref 全局变量），而非当前组件作用域
使用了 immediate: true 但没配对清理逻辑，首次执行后残留引用

此时必须显式调用 stop 函数终止监听。

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

正确清理路由监听的三种方式

根据组件是否被缓存，选择对应策略：

非 keep-alive 场景（标准卸载）：绑定到 onUnmounted 即可
const stop = watch(() => route.query.id, handler)
onUnmounted(() => stop())
keep-alive 场景（推荐）：在 onDeactivated 中停止，在 onActivated 中重启（或按需重建）
let stop: (() => void) | null = null
onActivated(() => {
  stop = watch(() => route.query.id, handler)
})
onDeactivated(() => {
  if (stop) stop()
  stop = null
})
通用健壮写法（推荐封装）：用一个函数统一管理，支持任意生命周期钩子
function watchRouteQuery(key: string, cb: (val: any) => void) {
  const stop = watch(() => route.query[key], cb)
  onDeactivated(stop)
  onUnmounted(stop)
  return stop
}