vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue对象数组改变内容值没变

Vue中对象数组改变其对象内容值数组没变化的原因与解决方案

作者:郡nionio

最近开发遇到一个问题,修改对象某一个索引对象时,直接将对象赋值给数组的某一索引对象,该数组没变化,在 Vue 中,直接修改对象数组中某个对象的属性值时,数组的引用本身未改变,本文介绍了详细的原理分析和解决方案,需要的朋友可以参考下

一、数组的底层原理(JavaScript 角度)

1. 数组是引用类型

const arr = [{ name: 'Alice' }, { name: 'Bob' }];
const arrRef = arr; // 指向同一内存地址
arr[0].name = 'Alex'; // 修改堆内存中的对象,arr 和 arrRef 的引用地址未变

2. 数组操作的分类

二、Vue 响应式系统的核心机制

1. Vue 2 的响应式实现

this.list[0].name = 'Alex'; // Vue 2 无法检测到变化!

2. Vue 3 的响应式改进

三、Vue 中“数组未变化”的根本原因

1. Vue 2 的场景

this.list[0].name = 'Alex'; // 修改成功,但视图不更新!

Vue 2 无法通过 Object.defineProperty 监听数组元素的属性变化。

this.list[0] = { name: 'Alex' }; // 视图不更新!

2. Vue 3 的场景

const list = reactive([{ name: 'Alice' }]);
list[0].name = 'Alex'; // 视图会自动更新 ✅
list[0] = { name: 'Alex' }; // 视图更新 ✅(Proxy 可检测索引变化)

四、解决方案:强制触发视图更新

1. Vue 2 的解决方案

this.$set(this.list, 0, { ...this.list[0], name: 'Alex' });
this.list = this.list.map(item => 
  item.id === targetId ? { ...item, key: newVal } : item
);

2. Vue 3 的解决方案

const list = ref([{ name: 'Alice' }]);
list.value[0].name = 'Alex'; // 自动更新 ✅
list.value = list.value.map(item => 
  item.id === targetId ? { ...item, key: newVal } : item
);

五、总结:关键原则

示例代码(Vue 2 不可变更新)

// 修改数组中某个对象的属性
this.list = this.list.map(item => {
  if (item.id === targetId) {
    return { ...item, name: 'New Name' };
  }
  return item;
});

六、附加:数组操作的响应式兼容表

操作类型Vue 2 是否触发更新Vue 3 是否触发更新
arr.push()
arr[index] = newValue
arr.splice()
修改对象属性 arr[index].key = value

以上就是Vue中对象数组改变其对象内容值数组没变化的原因与解决方案的详细内容,更多关于Vue对象数组改变内容值没变的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文