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

## 依赖收集：一个主动，一个被动

`watchEffect` 在初始化时会立刻执行一次传入的函数，执行过程中访问到的响应式属性会被自动收集为依赖。之后任何一个依赖变化，整个函数重新执行。这意味着依赖关系是运行时动态建立的，if 分支里访问了不同属性，依赖也会跟着变。

`watch` 则必须显式指定监听源。源可以是 ref、getter 函数、reactive 对象或数组。它不会立即执行回调（除非 `immediate: true`），并且在回调里拿到的 newVal/oldVal 是快照值。对于对象类型，Vue 3 默认只比较引用，所以监听 `reactive` 对象的某个属性变化时，必须写成 getter：

```js
import { reactive, watch } from 'vue'

const form = reactive({ user: { name: 'foo', age: 20 } })

// 不会触发，因为 form.user 引用没变
watch(form.user, () => { console.log('changed') })

// 正确：用 getter 返回具体值
watch(() => form.user.name, (newName, oldName) => {
 console.log(newName, oldName)
})

// 或者对整个 reactive 对象深度监听
watch(form, () => {}, { deep: true })
```

`watchEffect` 在这种情况下反而更省心，因为它执行时访问了 `form.user.name`，依赖自然被收集。但它的问题也在这里：如果函数体里有一堆逻辑，你很难一眼看出到底依赖了什么。

## 搜索联想里的竞态：watch 的经典翻车现场

假设有一个搜索输入框，用户每输入一个字符就发请求：

```js
import { ref, watch } from 'vue'

const keyword = ref('')
const results = ref([])

watch(keyword, async (val) => {
 if (!val) {
 results.value = []
 return
 }
 const res = await fetch(`/api/search?q=${encodeURIComponent(val)}`)
 results.value = await res.json()
})
```

这段代码在快速输入时会出问题。输入 “vue” 的过程中，请求按 v、vu、vue 依次发出，但网络返回顺序不确定。如果 “v” 的请求最后才回来，列表里显示的就是 “v” 的结果，而输入框里已经是 “vue”。

解决方式是在每次新请求发起时取消上一个。用 `AbortController` 配合 `onCleanup`：

```js
watch(keyword, async (val, _, onCleanup) => {
 if (!val) {
 results.value = []
 return
 }
 const controller = new AbortController()
 onCleanup(() => controller.abort())

 try {
 const res = await fetch(`/api/search?q=${encodeURIComponent(val)}`, {
 signal: controller.signal
 })
 results.value = await res.json()
 } catch (err) {
 if (err.name !== 'AbortError') throw err
 }
})
```

`watch` 和 `watchEffect` 都支持 `onCleanup`，它会在下一次回调执行前或监听器停止时调用。这个机制是处理异步副作用的标配，比手动维护一个自增 id 去判断“是否最新”要干净。

如果用 `watchEffect` 写同样的逻辑，要注意它立即执行，所以初始空值也要处理：

```js
watchEffect(async (onCleanup) => {
 const val = keyword.value
 if (!val) {
 results.value = []
 return
 }
 const controller = new AbortController()
 onCleanup(() => controller.abort())
 const res = await fetch(`/api/search?q=${encodeURIComponent(val)}`, {
 signal: controller.signal
 })
 results.value = await res.json()
})
```

这里有个细节：`watchEffect` 的回调是异步函数，Vue 无法等待它完成后再收集依赖。如果 `await` 之后才访问响应式属性，那部分依赖不会被追踪。所以依赖的读取尽量放在 `await` 之前。

## flush 时机决定 DOM 是否已更新

`watch` 和 `watchEffect` 默认都是 `flush: 'pre'`，即在组件更新前执行。如果你要在回调里读取更新后的 DOM，需要改成 `flush: 'post'`。比如一个自动调整高度的 textarea：

```js
watch(content, async () => {
 await nextTick()
 adjustHeight()
})

// 更直接
watch(content, () => {
 adjustHeight()
}, { flush: 'post' })
```

`watchEffect` 同样接受 `flush` 选项。在 SSR 场景下，`flush: 'post'` 的回调不会在服务端执行，避免访问不存在的 DOM。

`flush: 'sync'` 很少用，但某些需要同步响应的场景会碰到，比如在 `watch` 回调里修改另一个被同一轮渲染依赖的值。同步触发会导致多次更新，性能上要谨慎。

## 停止监听与组件卸载

在组件 `setup` 里创建的 `watch`/`watchEffect` 会绑定到当前组件实例，卸载时自动停止。但如果你在异步逻辑或者事件回调里创建监听器，就会脱离组件生命周期：

```js
onMounted(() => {
 setTimeout(() => {
 // 这个 watch 不会随组件卸载自动停止
 watch(source, () => {})
 }, 1000)
})
```

手动调用返回的停止函数即可：

```js
const stop = watch(source, () => {})
onUnmounted(stop)
```

`watchEffect` 返回的也是停止函数。养成在非 setup 同步阶段创建监听器时手动清理的习惯，能避免路由切换后回调还在跑、持有旧组件引用导致内存泄漏。

## 什么时候用哪个

需要旧值、需要 `immediate`、需要明确知道监听源、或者要监听多个来源时，`watch` 更合适。依赖关系简单、希望自动追踪、不关心旧值，`watchEffect` 写起来更短。但在依赖复杂、有异步操作的场景里，`watch` 的显式性能让代码更容易审查——至少你知道它为什么触发。

实际项目里我一般这样分：表单字段联动、路由参数变化、需要对比前后值的逻辑用 `watch`；纯副作用、初始化即执行、依赖来自多个响应式源的用 `watchEffect`。两者不是替代关系，混用没问题，关键是清楚每次回调触发时，闭包里那个值到底是不是最新的。

 推荐查看天气：https://www.0dtq.com/longquan/15tian.html
 推荐查看天气：https://www.0dtq.com/longquan/40tian.html
 推荐查看天气：https://www.0dtq.com/hefei/
 推荐查看天气：https://www.0dtq.com/hefei/zuotian.html
 推荐查看天气：https://www.0dtq.com/hefei/7tian.html
 推荐查看天气：https://www.0dtq.com/hefei/10tian.html
 推荐查看天气：https://www.0dtq.com/hefei/15tian.html
 推荐查看天气：https://www.0dtq.com/hefei/40tian.html
 推荐查看天气：https://www.0dtq.com/yaohai/
 推荐查看天气：https://www.0dtq.com/yaohai/zuotian.html
 推荐查看天气：https://www.0dtq.com/yaohai/7tian.html
 推荐查看天气：https://www.0dtq.com/yaohai/10tian.html
 推荐查看天气：https://www.0dtq.com/yaohai/15tian.html
 推荐查看天气：https://www.0dtq.com/yaohai/40tian.html
 推荐查看天气：https://www.0dtq.com/luyang/
 推荐查看天气：https://www.0dtq.com/luyang/zuotian.html
 推荐查看天气：https://www.0dtq.com/luyang/7tian.html
 推荐查看天气：https://www.0dtq.com/luyang/10tian.html
 推荐查看天气：https://www.0dtq.com/luyang/15tian.html
 推荐查看天气：https://www.0dtq.com/luyang/40tian.html
 推荐查看天气：https://www.0dtq.com/shushan/
 推荐查看天气：https://www.0dtq.com/shushan/zuotian.html
 推荐查看天气：https://www.0dtq.com/shushan/7tian.html
 推荐查看天气：https://www.0dtq.com/shushan/10tian.html
 推荐查看天气：https://www.0dtq.com/shushan/15tian.html
 推荐查看天气：https://www.0dtq.com/shushan/40tian.html
 推荐查看天气：https://www.0dtq.com/baohe/
 推荐查看天气：https://www.0dtq.com/baohe/zuotian.html
 推荐查看天气：https://www.0dtq.com/baohe/7tian.html
 推荐查看天气：https://www.0dtq.com/baohe/10tian.html
 推荐查看天气：https://www.0dtq.com/baohe/15tian.html
 推荐查看天气：https://www.0dtq.com/baohe/40tian.html
 推荐查看天气：https://www.0dtq.com/changfeng/
 推荐查看天气：https://www.0dtq.com/changfeng/zuotian.html
 推荐查看天气：https://www.0dtq.com/changfeng/7tian.html
 推荐查看天气：https://www.0dtq.com/changfeng/10tian.html
 推荐查看天气：https://www.0dtq.com/changfeng/15tian.html
 推荐查看天气：https://www.0dtq.com/changfeng/40tian.html
 推荐查看天气：https://www.0dtq.com/feidong/
 推荐查看天气：https://www.0dtq.com/feidong/zuotian.html
 推荐查看天气：https://www.0dtq.com/feidong/7tian.html
 推荐查看天气：https://www.0dtq.com/feidong/10tian.html
 推荐查看天气：https://www.0dtq.com/feidong/15tian.html
 推荐查看天气：https://www.0dtq.com/feidong/40tian.html
 推荐查看天气：https://www.0dtq.com/feixi/
 推荐查看天气：https://www.0dtq.com/feixi/zuotian.html
 推荐查看天气：https://www.0dtq.com/feixi/7tian.html
 推荐查看天气：https://www.0dtq.com/feixi/10tian.html
 推荐查看天气：https://www.0dtq.com/feixi/15tian.html
 推荐查看天气：https://www.0dtq.com/feixi/40tian.html
 推荐查看天气：https://www.0dtq.com/wuhu/
 推荐查看天气：https://www.0dtq.com/wuhu/zuotian.html
 推荐查看天气：https://www.0dtq.com/wuhu/7tian.html
 推荐查看天气：https://www.0dtq.com/wuhu/10tian.html
 推荐查看天气：https://www.0dtq.com/wuhu/15tian.html
 推荐查看天气：https://www.0dtq.com/wuhu/40tian.html
 推荐查看天气：https://www.0dtq.com/jinghu/
 推荐查看天气：https://www.0dtq.com/jinghu/zuotian.html
 推荐查看天气：https://www.0dtq.com/jinghu/7tian.html
 推荐查看天气：https://www.0dtq.com/jinghu/10tian.html
 推荐查看天气：https://www.0dtq.com/jinghu/15tian.html
 推荐查看天气：https://www.0dtq.com/jinghu/40tian.html
 推荐查看天气：https://www.0dtq.com/yijiang/
 推荐查看天气：https://www.0dtq.com/yijiang/zuotian.html
 推荐查看天气：https://www.0dtq.com/yijiang/7tian.html
 推荐查看天气：https://www.0dtq.com/yijiang/10tian.html
 推荐查看天气：https://www.0dtq.com/yijiang/15tian.html
 推荐查看天气：https://www.0dtq.com/yijiang/40tian.html
 推荐查看天气：https://www.0dtq.com/sanshan/
 推荐查看天气：https://www.0dtq.com/sanshan/zuotian.html
 推荐查看天气：https://www.0dtq.com/sanshan/7tian.html
 推荐查看天气：https://www.0dtq.com/sanshan/10tian.html
 推荐查看天气：https://www.0dtq.com/sanshan/15tian.html
 推荐查看天气：https://www.0dtq.com/sanshan/40tian.html
 推荐查看天气：https://www.0dtq.com/wuhuxian/
 推荐查看天气：https://www.0dtq.com/wuhuxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/wuhuxian/7tian.html
 推荐查看天气：https://www.0dtq.com/wuhuxian/10tian.html
 推荐查看天气：https://www.0dtq.com/wuhuxian/15tian.html
 推荐查看天气：https://www.0dtq.com/wuhuxian/40tian.html
 推荐查看天气：https://www.0dtq.com/fanchang/
 推荐查看天气：https://www.0dtq.com/fanchang/zuotian.html
 推荐查看天气：https://www.0dtq.com/fanchang/7tian.html
 推荐查看天气：https://www.0dtq.com/fanchang/10tian.html
 推荐查看天气：https://www.0dtq.com/fanchang/15tian.html
 推荐查看天气：https://www.0dtq.com/fanchang/40tian.html
 推荐查看天气：https://www.0dtq.com/nanling/
 推荐查看天气：https://www.0dtq.com/nanling/zuotian.html
 推荐查看天气：https://www.0dtq.com/nanling/7tian.html
 推荐查看天气：https://www.0dtq.com/nanling/10tian.html
 推荐查看天气：https://www.0dtq.com/nanling/15tian.html
 推荐查看天气：https://www.0dtq.com/nanling/40tian.html
 推荐查看天气：https://www.0dtq.com/bangbu/
 推荐查看天气：https://www.0dtq.com/bangbu/zuotian.html
 推荐查看天气：https://www.0dtq.com/bangbu/7tian.html
 推荐查看天气：https://www.0dtq.com/bangbu/10tian.html
 推荐查看天气：https://www.0dtq.com/bangbu/15tian.html
 推荐查看天气：https://www.0dtq.com/bangbu/40tian.html
 推荐查看天气：https://www.0dtq.com/longzihu/
 推荐查看天气：https://www.0dtq.com/longzihu/zuotian.html
 推荐查看天气：https://www.0dtq.com/longzihu/7tian.html
 推荐查看天气：https://www.0dtq.com/longzihu/10tian.html
 推荐查看天气：https://www.0dtq.com/longzihu/15tian.html
 推荐查看天气：https://www.0dtq.com/longzihu/40tian.html
 推荐查看天气：https://www.0dtq.com/bangshan/
 推荐查看天气：https://www.0dtq.com/bangshan/zuotian.html
 推荐查看天气：https://www.0dtq.com/bangshan/7tian.html
 推荐查看天气：https://www.0dtq.com/bangshan/10tian.html
 推荐查看天气：https://www.0dtq.com/bangshan/15tian.html
 推荐查看天气：https://www.0dtq.com/bangshan/40tian.html
 推荐查看天气：https://www.0dtq.com/yuhui/
 推荐查看天气：https://www.0dtq.com/yuhui/zuotian.html
 推荐查看天气：https://www.0dtq.com/yuhui/7tian.html
 推荐查看天气：https://www.0dtq.com/yuhui/10tian.html
 推荐查看天气：https://www.0dtq.com/yuhui/15tian.html
 推荐查看天气：https://www.0dtq.com/yuhui/40tian.html
 推荐查看天气：https://www.0dtq.com/huaishang/
 推荐查看天气：https://www.0dtq.com/huaishang/zuotian.html
 推荐查看天气：https://www.0dtq.com/huaishang/7tian.html
 推荐查看天气：https://www.0dtq.com/huaishang/10tian.html
 推荐查看天气：https://www.0dtq.com/huaishang/15tian.html
 推荐查看天气：https://www.0dtq.com/huaishang/40tian.html
 推荐查看天气：https://www.0dtq.com/huaiyuan/
 推荐查看天气：https://www.0dtq.com/huaiyuan/zuotian.html
 推荐查看天气：https://www.0dtq.com/huaiyuan/7tian.html
 推荐查看天气：https://www.0dtq.com/huaiyuan/10tian.html
 推荐查看天气：https://www.0dtq.com/huaiyuan/15tian.html
 推荐查看天气：https://www.0dtq.com/huaiyuan/40tian.html
 推荐查看天气：https://www.0dtq.com/wuhe/
 推荐查看天气：https://www.0dtq.com/wuhe/zuotian.html
 推荐查看天气：https://www.0dtq.com/wuhe/7tian.html
 推荐查看天气：https://www.0dtq.com/wuhe/10tian.html
 推荐查看天气：https://www.0dtq.com/wuhe/15tian.html
 推荐查看天气：https://www.0dtq.com/wuhe/40tian.html
 推荐查看天气：https://www.0dtq.com/guzhen/
 推荐查看天气：https://www.0dtq.com/guzhen/zuotian.html
 推荐查看天气：https://www.0dtq.com/guzhen/7tian.html
 推荐查看天气：https://www.0dtq.com/guzhen/10tian.html
 推荐查看天气：https://www.0dtq.com/guzhen/15tian.html
 推荐查看天气：https://www.0dtq.com/guzhen/40tian.html
 推荐查看天气：https://www.0dtq.com/huainan/
 推荐查看天气：https://www.0dtq.com/huainan/zuotian.html
 推荐查看天气：https://www.0dtq.com/huainan/7tian.html
 推荐查看天气：https://www.0dtq.com/huainan/10tian.html
 推荐查看天气：https://www.0dtq.com/huainan/15tian.html
 推荐查看天气：https://www.0dtq.com/huainan/40tian.html
 推荐查看天气：https://www.0dtq.com/tianjiaan/
 推荐查看天气：https://www.0dtq.com/tianjiaan/zuotian.html
 推荐查看天气：https://www.0dtq.com/tianjiaan/7tian.html
 推荐查看天气：https://www.0dtq.com/tianjiaan/10tian.html
 推荐查看天气：https://www.0dtq.com/tianjiaan/15tian.html
 推荐查看天气：https://www.0dtq.com/tianjiaan/40tian.html
 推荐查看天气：https://www.0dtq.com/xiejiaji/
 推荐查看天气：https://www.0dtq.com/xiejiaji/zuotian.html
 推荐查看天气：https://www.0dtq.com/xiejiaji/7tian.html
 推荐查看天气：https://www.0dtq.com/xiejiaji/10tian.html
 推荐查看天气：https://www.0dtq.com/xiejiaji/15tian.html
 推荐查看天气：https://www.0dtq.com/xiejiaji/40tian.html
 推荐查看天气：https://www.0dtq.com/bagongshan/
 推荐查看天气：https://www.0dtq.com/bagongshan/zuotian.html
 推荐查看天气：https://www.0dtq.com/bagongshan/7tian.html
 推荐查看天气：https://www.0dtq.com/bagongshan/10tian.html
 推荐查看天气：https://www.0dtq.com/bagongshan/15tian.html
 推荐查看天气：https://www.0dtq.com/bagongshan/40tian.html
 推荐查看天气：https://www.0dtq.com/panji/
 推荐查看天气：https://www.0dtq.com/panji/zuotian.html
 推荐查看天气：https://www.0dtq.com/panji/7tian.html
 推荐查看天气：https://www.0dtq.com/panji/10tian.html
 推荐查看天气：https://www.0dtq.com/panji/15tian.html
 推荐查看天气：https://www.0dtq.com/panji/40tian.html
 推荐查看天气：https://www.0dtq.com/fengtai/
 推荐查看天气：https://www.0dtq.com/fengtai/zuotian.html
 推荐查看天气：https://www.0dtq.com/fengtai/7tian.html
 推荐查看天气：https://www.0dtq.com/fengtai/10tian.html
 推荐查看天气：https://www.0dtq.com/fengtai/15tian.html
 推荐查看天气：https://www.0dtq.com/fengtai/40tian.html
 推荐查看天气：https://www.0dtq.com/maanshan/
 推荐查看天气：https://www.0dtq.com/maanshan/zuotian.html
 推荐查看天气：https://www.0dtq.com/maanshan/7tian.html
 推荐查看天气：https://www.0dtq.com/maanshan/10tian.html
 推荐查看天气：https://www.0dtq.com/maanshan/15tian.html
 推荐查看天气：https://www.0dtq.com/maanshan/40tian.html
 推荐查看天气：https://www.0dtq.com/huashan/
 推荐查看天气：https://www.0dtq.com/huashan/zuotian.html
 推荐查看天气：https://www.0dtq.com/huashan/7tian.html
 推荐查看天气：https://www.0dtq.com/huashan/10tian.html
 推荐查看天气：https://www.0dtq.com/huashan/15tian.html
 推荐查看天气：https://www.0dtq.com/huashan/40tian.html
 推荐查看天气：https://www.0dtq.com/dangtu/
 推荐查看天气：https://www.0dtq.com/dangtu/zuotian.html
 推荐查看天气：https://www.0dtq.com/dangtu/7tian.html
 推荐查看天气：https://www.0dtq.com/dangtu/10tian.html
 推荐查看天气：https://www.0dtq.com/dangtu/15tian.html
 推荐查看天气：https://www.0dtq.com/dangtu/40tian.html
 推荐查看天气：https://www.0dtq.com/huaibei/
 推荐查看天气：https://www.0dtq.com/huaibei/zuotian.html
 推荐查看天气：https://www.0dtq.com/huaibei/7tian.html
 推荐查看天气：https://www.0dtq.com/huaibei/10tian.html
 推荐查看天气：https://www.0dtq.com/huaibei/15tian.html
 推荐查看天气：https://www.0dtq.com/huaibei/40tian.html

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

Vue 3 中 watch 与 watchEffect 的依赖收集差异及竞态处理实战

在 Vue 3 的日常开发里，watch 和 watchEffect 经常被混着用，但它们在依赖收集方式上并不一样，这直接影响回调触发的时机和闭包捕获的值。典型场景是搜索框输入后发请求：用 watchEffect 自动追踪响应式依赖，看起来代码更短，但如果不注意 flush 配置和异步回调的顺序，很容易出现后一次请求先返回、旧数据覆盖新数据的问题。另一个常见坑是 watch 默认浅比较，当监听 r

人工智能

Vue3开发中watch与watchEffect依赖收集机制不同，直接影响回调触发和闭包值。文章解析主动与被动收集差异，解决搜索竞态、深层监听等痛点，通过AbortController和onCleanup实现取消方案，结合flush配置与真实场景给出代码组织建议。

代码解释

路由

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Vue 3 中 watch 与 watchEffect 的依赖收集差异及竞态处理实战-腾讯云开发者社区-腾讯云

Vue 3 中 watch 与 watchEffect 的依赖收集差异及竞态处理实战

Vue 3 中 watch 与 watchEffect 的依赖收集差异及竞态处理实战

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐