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

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

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

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

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

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

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

1. Vue 2 的響應(yīng)式實(shí)現(xiàn)

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

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

2. Vue 3 的響應(yīng)式改進(jìn)

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

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

1. Vue 2 的場(chǎng)景

• 直接修改對(duì)象屬性：

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

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

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

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

2. Vue 3 的場(chǎng)景

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

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

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

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

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

1. Vue 2 的解決方案

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

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

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

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

2. Vue 3 的解決方案

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

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

• 不可變更新（推薦）：

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

五、總結(jié)：關(guān)鍵原則

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

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

• Vue 2 的特殊處理：

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

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

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

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

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

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

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

最新評(píng)論