1. 什么是 this.$set()
?
this.$set(target, key, value)
是 Vue 2 中提供的一個方法,用于向響應式對象中動態添加屬性,確保新加的屬性同樣是響應式的。?
2. 為什么需要它?
Vue 2 的響應式系統基于 Object.defineProperty
,它只能檢測到對象已有屬性的變化,無法檢測新增的屬性。?
data() {return {user: {}}
},
methods: {addProp() {this.user.name = 'fang'; // 直接賦值不會觸發視圖更新}
}
?這樣寫,不會觸發視圖更新,因為
user
對象一開始沒有name
屬性。
3. 正確用法:
?
this.$set(this.user, 'name', 'fang');
?4. 具體示例:
export default {data() {return {info: {}}},methods: {addInfo() {this.$set(this.info, 'age', 30);// 或者Vue.set(this.info, 'age', 30); // 組件外用Vue全局對象調用}}
}
5. Vue 3 情況
Vue 3 使用 Proxy 實現響應式,天然支持新增屬性的響應式,不需要 $set
。