Vue 3 中 watch 与 watchEffect 的依赖收集差异及竞态处理实战
在 Vue 3 的日常开发里,watch 和 watchEffect 经常被混着用,但它们在依赖收集方式上并不一样,这直接影响回调触发的时机和闭包捕获的值。典型场景是搜索框输入后发请求:用 watchEffect 自动追踪响应式依赖,看起来代码更短,但如果不注意 flush 配置和异步回调的顺序,很容易出现后一次请求先返回、旧数据覆盖新数据的问题。另一个常见坑是 watch 默认浅比较,当监听 reactive 对象里的嵌套属性时不会触发,需要显式开启 deep 或者改用 getter 函数。本文从两者的依赖收集机制讲起,结合搜索联想、路由参数变化、表单草稿保存等真实场景,给出可落地的竞态取消...