Vue监听 深层属性追踪：watch在Vue3中如何监听对象内部指定属性变化

🔍 Vue监听 | 深层属性追踪：watch在Vue3中如何监听对象内部指定属性变化

场景引入：
小明正在开发一个电商后台管理系统，商品对象长这样👇：

const product = reactive({
  id: 123,
  details: {
    name: 'Vue限定款键盘',
    price: 399,
    stock: {
      warehouseA: 50,
      warehouseB: 30
    }
  }
})

现在有个需求：当price变化时自动计算折扣价，直接watch(product, ...)会触发所有属性变更，性能杀手啊！😱 别急，这就教你精准狙击深层属性！

基础监听：直接属性

对于第一层属性，直接写属性名即可：

watch(
  () => product.id,
  (newVal) => {
    console.log(`商品ID变成${newVal}啦~`)
  }
)

👉 适用场景：简单数据变更提醒

深层监听：对象内部属性

方案1：点语法路径

用箭头函数返回具体路径，Vue会自动追踪：

watch(
  () => product.details.price,
  (newPrice) => {
    console.log(`价格更新为${newPrice}，快重新计算折扣！`)
  }
)

⚠️ 注意：如果details被整个替换，监听会失效！

方案2：{ deep: true }

需要监听整个嵌套对象时：

watch(
  () => product.details,
  (newDetails) => {
    // 这里会响应details下任何变化
  },
  { deep: true } // 🚨 性能警告！慎用！
)

精准监听：动态路径

如果想监听stock下任意仓库库存变化：

watch(
  () => [product.details.stock.warehouseA, product.details.stock.warehouseB],
  ([newA, newB]) => {
    console.log(`仓库A:${newA} 仓库B:${newB}`)
  }
)

💡 小技巧：用数组同时监听多个属性

性能优化篇

避免滥用deep

深层监听会递归遍历所有属性,数据量大时可能卡顿，推荐：

// 只监听需要的层级
watch(
  () => product.details.stock,
  () => { /* ... */ },
  { deep: true } // 比监听整个product好多了
)

立即触发版

有些场景需要初始值也执行回调：

watch(
  () => product.details.price,
  (newVal) => { /* ... */ },
  { immediate: true } // 🚀 页面加载就执行一次
)

实战踩坑记录

陷阱1：新旧值相同？

watch(
  () => product.details,
  (newVal, oldVal) => {
    // 当修改details内部属性时，newVal和oldVal会相同！
    // 因为它们是同一个对象的引用
  },
  { deep: true }
)

✅ 解决方案：用_.cloneDeep拷贝旧值

陷阱2：数组变异方法

const tags = reactive(['Vue', 'React'])
watch(
  tags,
  () => { /* push/pop等操作可能不会触发 */ }
)

✅ 正确姿势：

watch(
  () => [...tags], // 创建新数组
  () => { /* 现在能捕获变化了 */ }
)

：

• 🎯 简单属性：直接路径监听
• 🏗️ 嵌套对象：箭头函数 + 精准路径
• ⚡ 性能优先：避免无脑deep
• 🧪 测试边缘情况：引用类型对比、数组变异

现在小明的价格监听器已经稳稳运行了,你的呢？😉 （2025-07最新实践验证）