在 Vue 2 中,this.$set
是一個用于響應式地添加新屬性到已有對象的全局 API。它的主要作用是解決 Vue 無法檢測到對象屬性添加或刪除的限制(由于 Vue 2 的響應式系統基于 Object.defineProperty
實現)。
1. 為什么需要 this.$set
?
在 Vue 2 中,直接給對象添加新屬性(如 this.obj.newProperty = value
)不會觸發視圖更新,因為 Vue 無法攔截這種動態添加的屬性變化。
2. 語法
this.$set(target, propertyName, value)
target
:目標對象(必須是響應式對象,如 Vue 實例的data
或 Vuex 的state
)。propertyName
:要添加的新屬性名(字符串或 Symbol)。value
:新屬性的值。
3. 示例
場景 1:動態添加對象屬性
// 錯誤寫法(不會觸發視圖更新)
this.user.age = 25;// 正確寫法(使用 $set)
this.$set(this.user, 'age', 25);
場景 2:動態更新數組索引
雖然 Vue 2 對數組的響應式處理有類似限制(無法直接通過索引修改數組,如 this.arr[0] = newValue
),但 $set
也可以用于數組:
// 錯誤寫法
this.items[0] = { name: 'New Item' };// 正確寫法
this.$set(this.items, 0, { name: 'New Item' });
4. 替代方案(Vue 3 及 Composition API)
在 Vue 3 中,響應式系統改用 Proxy
,不再需要 $set
,因為動態添加屬性會自動被追蹤:
// Vue 3 中直接添加即可
this.user.age = 25; // 會自動觸發視圖更新
5. 注意事項
- 僅對響應式對象有效:如果
target
是非響應式對象(如普通字面量),$set
無效。 - 優先使用 Vue.set:在非組件上下文(如普通函數)中,使用
Vue.set(obj, key, value)
。 - 數組方法:對于數組,優先使用 Vue 重寫的響應式方法(如
push
、splice
)。
總結
Vue 版本 | 是否需要 $set | 原因 |
---|---|---|
Vue 2 | ? 需要 | 響應式系統基于 defineProperty |
Vue 3 | ? 不需要 | 響應式系統基于 Proxy |
在 Vue 2 中,遇到動態添加屬性或數組索引更新的場景,記得用 this.$set
!