深度侦听
默认情况下，watch 仅侦听引用变化。
问题
JavaScript
const user = ref({ name: '张三', age: 18 })
watch(user, (newVal) => {
console.log('变化了')
})
user.value.age = 20 // 不会触发
user.value = { name: '李四', age: 20 } // 会触发
深度侦听
JavaScript
watch(user, (newVal) => {
console.log('内部变化:', newVal)
}, { deep: true })
user.value.age = 20 // 会触发
深度侦听会遍历对象所有嵌套层级。
侦听对象属性
JavaScript
watch(
() => user.name,
(newName) => console.log('名字变了:', newName)
)
使用 getter 函数侦听单个属性。
性能注意
深度侦听开销较大，大数据量时建议：
- 仅侦听需要的属性
- 使用 getter 函数精确控制
要点总结
{ deep: true }开启深度侦听- 适用于对象/数组内部变化
- 深度侦听有性能开销，谨慎使用
- 单个属性用 getter 函数
