刘勇虎的官方网站

在 Vue3 中监听对象数组属性时遇到新旧值相同的问题，主要原因是引用类型数据共享内存地址的特性。以下是 5 种优化方案及实现方式：

一、深拷贝方案（推荐）
javascript import { computed, watch } from 'vue'; // 通过计算属性生成深拷贝副本 const arrayCopy = computed(() => JSON.parse(JSON.stringify(obj.arrayProp))); watch(arrayCopy, (newVal, oldVal) => { console.log('差异对比:', newVal, oldVal); // 此时新旧值不同 });
原理：通过 JSON 序列化/反序列化破坏原有引用链，创建独立内存空间的新对象

二、监听特定元素方案
javascript // 监听数组第0个元素的特定属性 watch( () => obj.arrayProp[0]?.id, (newVal, oldVal) => { console.log('元素变化:', newVal, oldVal); } ); // 监听整个数组的特定属性集合 watch( () => obj.arrayProp.map(item => item.id), (newIds, oldIds) => { console.log('ID集合变化:', newIds, oldIds); } );

三、watchEffect 自动追踪方案
javascript watchEffect(() => { const currentArray = [...obj.arrayProp]; // 创建副本 // 自动追踪所有被使用的属性 console.log('数组变更:', currentArray); });
特点：无需显式声明监听项，自动追踪依赖变化，适合复杂数据结构的监听

四、手动记录旧值方案
javascript let oldValue = null; watch( () => [...obj.arrayProp], // 创建副本 (newVal) => { console.log('旧值:', oldValue); console.log('新值:', newVal); oldValue = [...newVal]; // 手动更新旧值 }, { deep: true } );

五、第三方库优化方案
javascript import { cloneDeep } from 'lodash-es'; watch( () => cloneDeep(obj.arrayProp), (newVal, oldVal) => { console.log('深度对比:', newVal, oldVal); }, { deep: true } );
优势：使用成熟库处理复杂对象的深拷贝，支持循环引用等特殊场景

选择建议：

1. 需要完整旧值记录 → 方案四
2. 高频更新场景 → 方案二（特定元素监听）
3. 复杂数据结构 → 方案五（配合 lodash）
4. 简单场景 → 方案一（JSON 深拷贝）

所有方案都需配合 { deep: true } 深度监听配置，注意深拷贝可能带来的性能损耗，建议根据数据规模选择合适的方案。如果仅需检测变化无需旧值，可直接使用 watch(() => [...obj.arrayProp], handler) 简化实现。