目錄

一、核心作用

三、使用場景與示例

1.?給對象添加新屬性

四、與?Vue.set?的關系

五、底層原理

六、Vue 3 的替代方案

七、最佳實踐

八、常見問題

Q：為什么修改嵌套對象屬性不需要?$set？

Q：$set?和?$forceUpdate?的區別？

總結

---

?

在 Vue 2 中，this.$set?是一個?響應式數據更新工具方法，用于解決 Vue 無法自動檢測到對象屬性或數組項變化的限制。

一、核心作用

• 問題背景：Vue 2 的響應式系統無法檢測以下變化：

  • 對象新增的屬性（如?obj.newKey = value）

  • 通過索引直接設置數組項（如?arr[0] = newValue）

• 解決方案：this.$set?強制讓這些修改變為響應式。

?二、方法簽名

this.$set(target, propertyName/index, value)

參數	類型	說明
target	Object/Array	需要修改的目標對象或數組
propertyName/index	String/Number	對象屬性名或數組索引
value	Any	要設置的新值

三、使用場景與示例

1.?給對象添加新屬性

data() {return {user: { name: 'Alice' }}
},
methods: {addAge() {// ? 非響應式（視圖不會更新）// this.user.age = 25; // ? 正確方式this.$set(this.user, 'age', 25);}
}

2.?修改數組指定項

data() {return {list: ['a', 'b', 'c']}
},
methods: {updateItem() {// ? 非響應式// this.list[1] = 'x';// ? 正確方式this.$set(this.list, 1, 'x');}
}

?3.?動態屬性名

setDynamicKey() {const key = 'dynamic_' + Date.now();this.$set(this.obj, key, 'value');
}

四、與?Vue.set?的關系

• this.$set：實例方法，只能在組件內部使用。

• Vue.set：全局方法，可在任何地方使用（需導入 Vue）。

  import Vue from 'vue';
  Vue.set(target, key, value); // 全局用法

五、底層原理

1. 對象屬性：
   調用?Object.defineProperty?將新屬性轉為 getter/setter。

2. 數組項：
   內部調用數組的?splice?方法觸發響應式更新。

六、Vue 3 的替代方案

在 Vue 3 中，由于使用 Proxy 實現響應式，$set?不再需要：

// Vue 3 中直接賦值即可
this.obj.newKey = 'value'; // 自動響應
this.arr[0] = 'new';      // 自動響應

七、最佳實踐

1. 優先在 data 中初始化所有屬性

   data() {return {user: { name: '', age: null } // 提前定義所有字段}
   }

2. 數組操作推薦使用變更方法

   • 用?push()、splice()?等替代直接索引賦值。

3. 動態屬性必須用?$set
   當屬性名不確定時（如根據接口返回字段），必須使用?$set。

八、常見問題

Q：為什么修改嵌套對象屬性不需要?$set？

this.obj.nested.prop = 'value'; // 有效（只要嵌套屬性已存在）

• 答案：Vue 會遞歸監聽已存在的嵌套屬性，但新增頂級屬性仍需?$set。

Q：$set?和?$forceUpdate?的區別？

• $set：精準更新特定數據，觸發響應式。

• $forceUpdate：強制重新渲染整個組件（性能差，盡量避免）。

?

總結

場景	解決方案
對象新增屬性	this.$set(obj, 'key', value)
修改數組指定項	this.$set(arr, index, value)
Vue 3 項目	直接賦值（無需?$set）

this.$set?是 Vue 2 響應式系統的必要補充，合理使用可避免隱蔽的視圖更新問題。