哎，兄弟，今天咱们聊聊 Vue3 那个watch怎么就跟你说的那样，明明改了数据，却纹丝不动，根本没监听到。

先说一句，我也是踩过坑的。说实话，一开始我还以为是我写的代码太烂，结果发现是 Vue 的细节在作怪。

reactive是把整个对象变成响应式，属性内部的增删改douNeng被追踪。

ref只包装单个值，用.value访问。

所以Ru果你把一个ref直接丢进watch => obj.prop)，其实根本没有对应的响应式依赖，监听不到。

哈哈，这种情况我一开始还想“哎呀，是不是 Vue 的 bug？”后来才恍然大悟——不对不对，是我用了错误的写法。

watch => console.log)

或者用函数写法watch => countRef.value, ...)

当你要监控一个嵌套对象内部属性时光用普通的函数写法是抓不到的。

例子：

const state = reactive({
    user: {
        name: '小明',
        age: 18
    }
})
// ❌ 只监听 state.user，不会触发 user.name 的变化
watch => state.user,  => console.log)
// ✅ 必须 deep:true 或者直接监听具体属性
watch => state.user,  => console.log, { deep: true })
watch => state.user.name,  => console.log)

别kan这段代码挺长，但其实核心就是：想监控内部属性，就得 deep 或者指向具体路径。

本身是响应式的，但Ru果你只 watch 长度或某个索引，有时候会漏掉 push/pop 之类的方法。

正确姿势：

const list = reactive
// ❌ 只kan length，push 时可Neng不触发
watch => list.length,  => console.log)
// ✅ 直接监听整个数组
watch => console.log, { deep: true })

A：你把对象解构出来用普通变量去 watch，那就等于把响应性给抹掉了。

B：正确Zuo法是继续用 getter 函数指向原始对象。

const info = reactive
// ❌ 解构后失效
const { title } = info
watch => console.log) // 没反应
// ✅ 用 getter
watch => info.title,  => console.log)

.value = xxx/= `=`后 Vue 并不会立刻同步到视图，而是放进队列里稍后执行。

所以Ru果你在同一个 tick 内改值再读旧值，就会出现“好像没有变化”的错觉。

SOLUTION：

watch => user.name, async  => {
    await nextTick
    console.log
})

# 随机问答时间 # 有人常问：“我的博客文章写得不错，为啥百度搜索里找不到？”

# 答案 # 百度爬虫geng喜欢结构清晰、有sitemap.xml且页面加载速度快的站点。还有一点，就是内容要足够独特、关键词密度合理。别老抄别人的代码块，否则被判重复内容，收录率直线下降。

- 把普通对象当成响应式直接 watch。没加 { deep:true }? 那只Neng监控引用变化。

- 用 { immediate:true }? Ru果你想在组件挂载时立即执行一次回调，一定记得加上，否则第一次渲染时不会触发。

- 多个 watcher 同时监听同一个属性，会导致回调顺序不可预期。Zui好合并逻辑或使用 computed 来统一处理。

1️⃣ 打印一下你传给 watch 的第一个参数，kan它到底返回的是哪个值；Ru果是 undefined，那肯定没法追踪。

2️⃣ 确认是否用了 .value/getter 正确指向；解构后记得回头检查。

3️⃣ 检查是否忘记加 deep；尤其是对象嵌套层数大于1时。

4️⃣ kankan有没有在同一个 tick 内多次修改同一属性，必要时加上 a​wait nextTick.