vue3 watch中使用deep: true 来监听对象或数组中的嵌套属性的变化

响应式监听解析

2.1 两种赋值方式对比

// 案例数据
const sourceData = reactive({user: {name: '张三',age: 25}})
// 方式一：直接引用
const copy1 = sourceData.user
copy1.age = 30 
// 会修改源数据
// 方式二：展开运算符
const copy2 = { ...sourceData.user }
copy2.age = 30 
// 不会影响源数据

2.2 深度监听原理图解

import { watch } from 'vue';

const state = reactive({
  user: {
    name: 'Alice',
    age: 30
  }
});

// 监听 `state.user` 的变化
watch(() => state.user, (newVal, oldVal) => {
  console.log('User changed:', newVal, oldVal);
});

// 使用 deep: true 进行深度监听 
watch( () => state.user, (newVal, oldVal) => {
console.log('User object changed:', newVal, oldVal); },
{ deep: true } 
// 开启深度监听 );

默认监听：对象地址变化 → 🚫检测嵌套变化

深度监听：对象地址变化 → ✅检测嵌套变化↓递归检测所有属性 → 🕵️♂️深度追踪

2.3 性能优化建议

// 好的实践：按需使用深度监听
watch(() => ({ ...props.largeData }),(newVal) => {// 处理数据},
{ deep: true, immediate: true })
// 更好的方式：分层监听
watch(() => props.data.items,(newItems) => {// 只监听特定属性})