Vue中的$set的使用實例代碼
Vue —$set
在我們使用vue進(jìn)行開發(fā)的過程中，可能會遇到一種情況：當(dāng)生成vue實例后，當(dāng)再次給數(shù)據(jù)賦值時，有時候并不會自動更新到視圖上去；
當(dāng)我們?nèi)タ磛ue文檔的時候，會發(fā)現(xiàn)有這么一句話：如果在實例創(chuàng)建之后添加新的屬性到實例上，它不會觸發(fā)視圖更新。
如下代碼，給 student對象新增 age 屬性
data () {
return {
student: {
name: '',
sex: ''
}
}
}
mounted () { // ——鉤子函數(shù)，實例掛載之后
this.student.age = 24
}
原因是：受 ES5 的限制，Vue.js 不能檢測到對象屬性的添加或刪除。因為 Vue.js 在初始化實例時將屬性轉(zhuǎn)為 getter/setter，所以屬性必須在 data 對象上才能讓 Vue.js 轉(zhuǎn)換它，才能讓它是響應(yīng)的。
要處理這種情況，我們可以使用$set()方法，既可以新增屬性,又可以觸發(fā)視圖更新。
但是，值得注意的是，網(wǎng)上一些資料寫的$set()用法存在一些問題，導(dǎo)致在新接觸這個方法的時候會走一些彎路！
錯誤寫法：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)
}
總結(jié)
以上所述是小編給大家介紹的Vue中的$set的使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue3根據(jù)動態(tài)字段綁定v-model的操作代碼
最近在學(xué)習(xí)vue技術(shù)，開發(fā)表格的時候，想把表格做成組件，那查詢條件就需要動態(tài)生成，這就遇到一個問題，vue怎么動態(tài)給v-model變量值，本文通過實例代碼給大家介紹，對Vue3動態(tài)綁定v-model實例代碼感興趣的朋友一起看看吧2022-10-10
vue+antDesign實現(xiàn)樹形數(shù)據(jù)展示及勾選聯(lián)動
本文主要介紹了vue+antDesign實現(xiàn)樹形數(shù)據(jù)展示及勾選聯(lián)動，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
使用 Vue-TCB 快速在 Vue 應(yīng)用中接入云開發(fā)的方法
這篇文章主要介紹了如何使用 Vue-TCB 快速在 Vue 應(yīng)用中接入云開發(fā),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
關(guān)于vue設(shè)置環(huán)境變量全流程
這篇文章主要介紹了關(guān)于vue設(shè)置環(huán)境變量全流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue動態(tài)綁定多個類名方法詳解(:class動態(tài)綁定多個類名)
vue中可以通過:class=""這樣來根據(jù)一定的條件來動態(tài)添加class,但是有時候需要判斷的條件比較多,需要動態(tài)添加的class也比較多,下面這篇文章主要給大家介紹了關(guān)于vue動態(tài)綁定多個類名(:class動態(tài)綁定多個類名)的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue2項目中全局封裝axios問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue中使用gojs/jointjs的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Nuxt.js之自動路由原理的實現(xiàn)方法，nuxt.js會根據(jù)pages目錄結(jié)構(gòu)自動生成vue-router模塊的路由配置。非常具有實用價值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue 獲取url里參數(shù)的兩種方法小結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue打包程序部署到Nginx 點擊跳轉(zhuǎn)404問題
這篇文章主要介紹了Vue打包程序部署到Nginx 點擊跳轉(zhuǎn)404問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02