溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何在Vue中使用$set？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
Vue —$set
在我們使用vue進行開發的過程中，可能會遇到一種情況：當生成vue實例后，當再次給數據賦值時，有時候并不會自動更新到視圖上去；
當我們去看vue文檔的時候，會發現有這么一句話：如果在實例創建之后添加新的屬性到實例上，它不會觸發視圖更新。
如下代碼，給 student對象新增 age 屬性
data () {
return {
student: {
name: '',
sex: ''
}
}
}
mounted () { // ——鉤子函數，實例掛載之后
this.student.age = 24
}原因是：受 ES5 的限制，Vue.js 不能檢測到對象屬性的添加或刪除。因為 Vue.js 在初始化實例時將屬性轉為 getter/setter，所以屬性必須在 data 對象上才能讓 Vue.js 轉換它，才能讓它是響應的。
要處理這種情況，我們可以使用$set()方法，既可以新增屬性,又可以觸發視圖更新。
但是，值得注意的是，網上一些資料寫的$set()用法存在一些問題，導致在新接觸這個方法的時候會走一些彎路！
錯誤寫法：this.$set(key,value)（ps: 可能是vue1.0的寫法）
mounted () {
this.$set(this.student.age, 24)
}正確寫法：this.$set(this.data,”key”,value')
mounted () {
this.$set(this.student,"age", 24)
}看完上述內容，你們掌握如何在Vue中使用$set的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
