当前位置：首页 > article >正文

Vue3监听对象数组属性变化方法

article 2025/8/17 6:47:43

在Vue3中，监听对象数组中某个属性的变化可以通过以下几种方法实现：

方法一：深度监听整个数组并比较属性变化

使用 watch 函数并启用 deep: true，在回调中遍历比较新旧数组的特定属性。

javascript

复制

下载

import { ref, watch } from 'vue';const items = ref([{ id: 1, name: 'A' },{ id: 2, name: 'B' }
]);watch(() => [...items.value], // 创建数组副本确保触发响应(newItems, oldItems) => {newItems.forEach((newItem, index) => {const oldItem = oldItems[index];if (oldItem && newItem.name !== oldItem.name) {console.log(`Item ${newItem.id}的name变化: ${oldItem.name} => ${newItem.name}`);}});},{ deep: true }
);

优点：简单易用，无需动态管理监听器。
缺点：任何数组或元素属性变化都会触发回调，需手动比较属性，可能影响性能。

方法二：为每个元素单独设置监听器

遍历数组并为每个对象的属性设置独立的 watch，动态管理监听器的生命周期。

javascript

复制

下载

import { ref, watch, onBeforeUnmount } from 'vue';const items = ref([{ id: 1, name: 'A' },{ id: 2, name: 'B' }
]);const stops = new Map(); // 使用Map保存监听器的停止函数// 初始化监听
const setupWatchers = () => {items.value.forEach(item => {if (!stops.has(item.id)) {const stop = watch(() => item.name,(newVal, oldVal) => {console.log(`Item ${item.id}的name变化: ${oldVal} => ${newVal}`);});stops.set(item.id, stop);}});
};// 监听数组变化，动态更新监听器
watch(() => [...items.value], // 触发数组变化(newItems, oldItems) => {// 移除已删除元素的监听oldItems.forEach(oldItem => {if (!newItems.some(item => item.id === oldItem.id)) {const stop = stops.get(oldItem.id);if (stop) {stop();stops.delete(oldItem.id);}}});// 添加新元素的监听newItems.forEach(newItem => {if (!stops.has(newItem.id)) {const stop = watch(() => newItem.name,(newVal, oldVal) => {console.log(`Item ${newItem.id}的name变化: ${oldVal} => ${newVal}`);});stops.set(newItem.id, stop);}});},{ deep: true, immediate: true }
);// 组件卸载时清理所有监听
onBeforeUnmount(() => {stops.forEach(stop => stop());stops.clear();
});

优点：精确监听目标属性，避免不必要的回调。
缺点：需手动管理监听器，逻辑较复杂。

方法三：提取属性数组并监听变化

使用 computed 提取所有目标属性，监听该数组的变化。

javascript

复制

下载

import { ref, watch, computed } from 'vue';const items = ref([{ id: 1, name: 'A' },{ id: 2, name: 'B' }
]);const names = computed(() => items.value.map(item => item.name));watch(names, (newNames, oldNames) => {newNames.forEach((newName, index) => {const oldName = oldNames[index];if (oldName !== undefined && newName !== oldName) {console.log(`索引${index}的name变化: ${oldName} => ${newName}`);}});
});

优点：仅关注特定属性，减少比较范围。
缺点：无法直接关联到原对象，需通过索引处理。

// 提取金额数组
const totalArray = computed(() => ckDetail.value.map((item) => item.total));
// 监听金额数组
watch(() => totalArray.value,() => {// 累计出库明细金额，得到出库总额ckMaster.value.total = totalArray.value.reduce((pre, cur) => pre + Number(formatToRMB(cur)), 0);}
);