Appearance
watch、watchEffect 与清理机制:竞态取消与 effect 生命周期
主题边界
watch/watchEffect的清理机制本质上是在管理副作用生命周期,而不是语法小技巧。- 一旦逻辑涉及请求、订阅、计时器或事件监听,cleanup 就直接关系到竞态和内存泄漏。
机制与流程
- 每次 effect 重新执行前,Vue 会先执行上一次注册的清理函数,用于取消旧请求、解绑事件或清理计时器。
watchEffect自动收集同步阶段读取到的依赖,依赖变化后会先 cleanup 再重跑。- 异步请求通常会把 cleanup 和
AbortController或业务版本号结合,避免旧请求覆盖新状态。
关键差异
watch更适合显式 source 和精确监听;watchEffect更适合同步读取链清晰的副作用。- cleanup 解决的是副作用重入前的回收,不解决所有并发写入问题;共享状态竞争仍需额外约束。
边界条件
watchEffect只会收集同步执行阶段的依赖,异步回调里的读取不会自动进入依赖图。- 只注册 cleanup 但不做请求取消或结果丢弃,仍可能出现旧响应覆盖新状态。
工程落点
- 搜索建议、联动表单、路由切换请求和订阅式数据流都大量依赖这套清理机制。
- 这道题如果能落到竞态、取消和 effect 生命周期,已经明显高于“会用 watch”层级。