一、數(shù)組的底層原理（JavaScript 角度）

1. 數(shù)組是引用類型

• 數(shù)組變量存儲的是指向堆內存中數(shù)組對象的引用地址。
• 修改數(shù)組中對象的屬性值時，數(shù)組的引用地址未變，但堆內存中的對象內容被修改。

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

2. 數(shù)組操作的分類

• 改變原數(shù)組（引用地址不變）：push, pop, splice, 直接修改元素屬性等。
• 返回新數(shù)組（引用地址變化）：map, filter, slice, 擴展運算符等。

二、Vue 響應式系統(tǒng)的核心機制

1. Vue 2 的響應式實現(xiàn)

• 對象監(jiān)聽：通過 Object.defineProperty 遞歸劫持對象屬性的 getter/setter。
• 數(shù)組監(jiān)聽：重寫數(shù)組的 7 個變異方法（push, pop, splice 等），但這些方法只能檢測數(shù)組結構變化，無法檢測元素屬性變化。
• 直接修改對象屬性的問題：

this.list[0].name = 'Alex'; // Vue 2 無法檢測到變化！

2. Vue 3 的響應式改進

• 使用 Proxy 代理整個對象/數(shù)組，能檢測深層屬性變化（包括數(shù)組元素屬性修改）。
• 局限性：直接通過索引修改數(shù)組元素時，仍需遵循不可變原則（如使用 map 返回新數(shù)組）。

三、Vue 中“數(shù)組未變化”的根本原因

1. Vue 2 的場景

• 直接修改對象屬性：

this.list[0].name = 'Alex'; // 修改成功，但視圖不更新！

Vue 2 無法通過 Object.defineProperty 監(jiān)聽數(shù)組元素的屬性變化。

• 直接通過索引修改數(shù)組元素：

this.list[0] = { name: 'Alex' }; // 視圖不更新！

2. Vue 3 的場景

• Proxy 的深度監(jiān)聽：

const list = reactive([{ name: 'Alice' }]);
list[0].name = 'Alex'; // 視圖會自動更新 ?

• 直接替換數(shù)組元素仍需注意：

list[0] = { name: 'Alex' }; // 視圖更新 ?（Proxy 可檢測索引變化）

四、解決方案：強制觸發(fā)視圖更新

1. Vue 2 的解決方案

• 使用 Vue.set 或 this.$set：

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

• 替換整個數(shù)組（創(chuàng)建新引用）：

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

2. Vue 3 的解決方案

• 直接修改屬性（Proxy 自動監(jiān)聽）：

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

• 不可變更新（推薦）：

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

五、總結：關鍵原則

• 不可變數(shù)據(jù)（Immutability）：

  • 始終返回新數(shù)組/新對象，確保引用地址變化。
  • 使用 map, filter, 擴展運算符等非破壞性方法。

• Vue 2 的特殊處理：

  • 修改數(shù)組元素屬性時，必須用 Vue.set 或替換整個數(shù)組。

• Vue 3 的優(yōu)勢：

  • 利用 Proxy 的深度監(jiān)聽，直接修改對象屬性可觸發(fā)更新。

示例代碼（Vue 2 不可變更新）：

// 修改數(shù)組中某個對象的屬性
this.list = this.list.map(item => {
  if (item.id === targetId) {
    return { ...item, name: 'New Name' };
  }
  return item;
});

六、附加：數(shù)組操作的響應式兼容表

以上就是Vue中對象數(shù)組改變其對象內容值數(shù)組沒變化的原因與解決方案的詳細內容，更多關于Vue對象數(shù)組改變內容值沒變的資料請關注腳本之家其它相關文章！

最新評論