之前了解這個(gè)方法的時(shí)候枢里,感覺這一輩子也用不到這個(gè)方法探越,因?yàn)楫?dāng)時(shí)沒有應(yīng)用場景,但是還真有用的時(shí)候??腐螟,我相信你們也有用到時(shí)候愿汰。
從三個(gè)方面給大家說一下這個(gè)this.$set:
1.this.$set實(shí)現(xiàn)什么功能,為什么要用它乐纸?
2.怎么用它衬廷?
3.應(yīng)用場景
1.this.$set實(shí)現(xiàn)什么功能,為什么要用它汽绢?
當(dāng)你發(fā)現(xiàn)你給對象加了一個(gè)屬性吗跋,在控制臺能打印出來,但是卻沒有更新到視圖上時(shí)宁昭,也許這個(gè)時(shí)候就需要用到this.$set()這個(gè)方法了跌宛,簡單來說this.$set的功能就是解決這個(gè)問題的啦。官方解釋:向響應(yīng)式對象中添加一個(gè)屬性积仗,并確保這個(gè)新屬性同樣是響應(yīng)式的疆拘,且觸發(fā)視圖更新。它必須用于向響應(yīng)式對象上添加新屬性斥扛,因?yàn)?Vue 無法探測普通的新增屬性 (比如?this.myObject.newProperty = 'hi')入问,你會發(fā)現(xiàn)vue官網(wǎng)是vue.set,vue.set的用法稀颁,給你們插入連接芬失,怕你們找不到??,我們現(xiàn)在講的這個(gè)this.$set()和它有什么關(guān)系呢匾灶?咱先說this.$set()棱烂,因?yàn)樗麄儌z的區(qū)別就涉及原理問題啦。
2.怎么用它阶女?
搞個(gè)栗子:
1.vue 中寫在<template></template>標(biāo)簽的代碼
2.export default{}中data數(shù)據(jù)
3.點(diǎn)擊按鈕觸發(fā)changeValue方法颊糜,
??調(diào)用方法:this.$set( target, key, value )
?? target:要更改的數(shù)據(jù)源(可以是對象或者數(shù)組)
?? key:要更改的具體數(shù)據(jù)
?? value :重新賦的值
4.在沒有點(diǎn)擊按鈕的時(shí)候,界面是這樣的秃踩,雖然界面沒有顯示出來衬鱼,但是控制臺已經(jīng)打印出來了
5.當(dāng)點(diǎn)擊按鈕的時(shí)候,調(diào)用this.$set方法憔杨,成功顯示第三個(gè)屬性,這就是整個(gè)過程啦??
3.應(yīng)用場景
當(dāng)你需要為對象添加一個(gè)新屬性時(shí)鸟赫,或者你遇到我上邊所說的問題的時(shí)候可以試試這個(gè)方法,具體vue.set和this.$set()的原理和區(qū)別,可以參考這個(gè)vue.set和this.$set()的區(qū)別抛蚤,仔細(xì)看看如果暫時(shí)不懂也沒關(guān)系台谢,先解決問題,會用這個(gè)方法岁经。
可能有說的不好的地方朋沮,如果有什么問題請留言,歡迎大家指正??