Skip to content

watch、watchEffect 与清理机制:竞态取消与 effect 生命周期

主题边界

  • watch / watchEffect 的清理机制本质上是在管理副作用生命周期,而不是语法小技巧。
  • 一旦逻辑涉及请求、订阅、计时器或事件监听,cleanup 就直接关系到竞态和内存泄漏。

机制与流程

  • 每次 effect 重新执行前,Vue 会先执行上一次注册的清理函数,用于取消旧请求、解绑事件或清理计时器。
  • watchEffect 自动收集同步阶段读取到的依赖,依赖变化后会先 cleanup 再重跑。
  • 异步请求通常会把 cleanup 和 AbortController 或业务版本号结合,避免旧请求覆盖新状态。

关键差异

  • watch 更适合显式 source 和精确监听;watchEffect 更适合同步读取链清晰的副作用。
  • cleanup 解决的是副作用重入前的回收,不解决所有并发写入问题;共享状态竞争仍需额外约束。

边界条件

  • watchEffect 只会收集同步执行阶段的依赖,异步回调里的读取不会自动进入依赖图。
  • 只注册 cleanup 但不做请求取消或结果丢弃,仍可能出现旧响应覆盖新状态。

工程落点

  • 搜索建议、联动表单、路由切换请求和订阅式数据流都大量依赖这套清理机制。
  • 这道题如果能落到竞态、取消和 effect 生命周期,已经明显高于“会用 watch”层级。

相关主题