vue中this.$set的用法


vue中this.$set的用法

之前了解這個方法的時候,感覺這一輩子也用不到這個方法,因為當時沒有應用場景,但是還真有用的時候🤣,我相信你們也有用到時候。

從三個方面給大家說一下這個this.$set:

1.this.$set實現什么功能,為什么要用它?

2.怎么用它?

3.應用場景

1.this.$set實現什么功能,為什么要用它?

當你發現你給對象加了一個屬性,在控制台能打印出來,但是卻沒有更新到視圖上時,也許這個時候就需要用到this.$set()這個方法了,簡單來說this.$set的功能就是解決這個問題的啦。官方解釋:向響應式對象中添加一個屬性,並確保這個新屬性同樣是響應式的,且觸發視圖更新。它必須用於向響應式對象上添加新屬性,因為 Vue 無法探測普通的新增屬性 (比如 this.myObject.newProperty = 'hi'),你會發現vue官網是vue.set,vue.set的用法,給你們插入連接,怕你們找不到😁,我們現在講的這個this.$set()和它有什么關系呢?咱先說this.$set(),因為他們倆的區別就涉及原理問題啦。

2.怎么用它?

搞個栗子:

1.vue 中寫在<template></template>標簽的代碼

 

2.export default{}中data數據

 

 

3.點擊按鈕觸發changeValue方法,

🌹調用方法:this.$set( target, key, value )

🌹 target:要更改的數據源(可以是對象或者數組)

🌹 key:要更改的具體數據

🌹 value :重新賦的值

 

4.在沒有點擊按鈕的時候,界面是這樣的,雖然界面沒有顯示出來,但是控制台已經打印出來了

 

 
 

5.當點擊按鈕的時候,調用this.$set方法,成功顯示第三個屬性,這就是整個過程啦😁

 

 

3.應用場景

當你需要為對象添加一個新屬性時,或者你遇到我上邊所說的問題的時候可以試試這個方法,具體vue.set和this.$set()的原理和區別,可以參考這個vue.set和this.$set()的區別,仔細看看如果暫時不懂也沒關系,先解決問題,會用這個方法。

可能有說的不好的地方,如果有什么問題請留言,歡迎大家指正🤞

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM