深度侦听

默认情况下，watch 仅侦听引用变化。

问题

const user = ref({ name: '张三', age: 18 })

watch(user, (newVal) => {
  console.log('变化了')
})

user.value.age = 20 // 不会触发
user.value = { name: '李四', age: 20 } // 会触发

深度侦听

watch(user, (newVal) => {
  console.log('内部变化:', newVal)
}, { deep: true })

user.value.age = 20 // 会触发

深度侦听会遍历对象所有嵌套层级。

侦听对象属性

watch(
  () => user.name,
  (newName) => console.log('名字变了:', newName)
)

使用 getter 函数侦听单个属性。

性能注意

深度侦听开销较大，大数据量时建议：

• 仅侦听需要的属性
• 使用 getter 函数精确控制

要点总结

• { deep: true } 开启深度侦听
• 适用于对象/数组内部变化
• 深度侦听有性能开销，谨慎使用
• 单个属性用 getter 函数