对象数组改变其对象内容值数组没变化？

最近开发遇到一个问题，修改对象某一个索引对象时，直接将对象赋值给数组的某一索引对象，该数组没变化。

在 Vue 中，直接修改对象数组中某个对象的属性值时，数组的引用本身未改变，而 Vue 的响应式系统（尤其是 Vue 2）对数组和对象的监听存在特定限制。以下是原理分析和解决方案：

javascript 复制代码

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

对象监听 ：通过 Object.defineProperty 递归劫持对象属性的 getter/setter。
数组监听 ：重写数组的 7 个变异方法（push, pop, splice 等），但这些方法只能检测数组结构变化，无法检测元素属性变化。

直接修改对象属性的问题 ：

javascript 复制代码

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

直接修改对象属性 ：
javascript 复制代码
```
this.list[0].name = 'Alex'; // 修改成功，但视图不更新！
```
- Vue 2 无法通过 Object.defineProperty 监听数组元素的属性变化。
直接通过索引修改数组元素 ：
javascript 复制代码
```
this.list[0] = { name: 'Alex' }; // 视图不更新！
```

Proxy 的深度监听 ：

javascript 复制代码

const list = reactive([{ name: 'Alice' }]);
list[0].name = 'Alex'; // 视图会自动更新 ✅

直接替换数组元素仍需注意 ：

javascript 复制代码

list[0] = { name: 'Alex' }; // 视图更新 ✅（Proxy 可检测索引变化）

使用 Vue.set 或 this.$set ：

javascript 复制代码

this.$set(this.list, 0, { ...this.list[0], name: 'Alex' });

替换整个数组 （创建新引用）：

javascript 复制代码

this.list = this.list.map(item => 
  item.id === targetId ? { ...item, key: newVal } : item
);

直接修改属性 （Proxy 自动监听）：

javascript 复制代码

const list = ref([{ name: 'Alice' }]);
list.value[0].name = 'Alex'; // 自动更新 ✅

不可变更新（推荐） ：

javascript 复制代码

list.value = list.value.map(item => 
  item.id === targetId ? { ...item, key: newVal } : item
);

不可变数据（Immutability）：
- 始终返回新数组/新对象，确保引用地址变化。
- 使用 map, filter, 扩展运算符等非破坏性方法。
Vue 2 的特殊处理：
- 修改数组元素属性时，必须用 Vue.set 或替换整个数组。
Vue 3 的优势：
- 利用 Proxy 的深度监听，直接修改对象属性可触发更新。

示例代码（Vue 2 不可变更新）：

javascript 复制代码

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