Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項(xiàng)
引文
vue文檔列表渲染中有條注意事項(xiàng)：
這里提到的兩種情況實(shí)際改變了數(shù)據(jù)但是沒有觸發(fā)視圖更新。
由此引出Vue.set()，先上文檔API：
 |
this.$set()和Vue.set()本質(zhì)方法一樣，前者可以用在methods中使用。
set方法調(diào)用時(shí)，可以觸發(fā)頁(yè)面全部重新渲染。
比如在vue中有個(gè)data數(shù)組arr：
//arr=[1,2,3] arr[1]='b' console.log(arr) // [1,2,3] Vue.set(arr,2,'c') console.log(arr) // [1,b,c]
可以看出set觸發(fā)了整個(gè)頁(yè)面的重新渲染，連arr[1]='b'的效果也被重新渲染了。
使用set添加數(shù)據(jù)
Vue.set()不光能修改數(shù)據(jù)，還能添加數(shù)據(jù)，彌補(bǔ)了Vue數(shù)組變異方法的不足。
可以使用set添加數(shù)據(jù)這一特性，解決一些常見問題。
例如循環(huán)出的元素點(diǎn)擊應(yīng)用選中樣式，再點(diǎn)擊取消選中樣式。
<section v-for="item in list"> <div :class="['xxclass',item.checked?'checked':'']"></div> </section> <!--這里通過判斷item的**本身不存在的checked屬性**來(lái)決定是否增加checked樣式類-->
點(diǎn)擊方法如下：
clickHandle: function(item){
if(typeof item.checked === 'undefined'){
this.$set(item, 'checked', true)
} else {
item.checked = !item.checked
}
}
// 如果item沒有checked屬性就用set方法添加，有則取反
這就利用set使用了對(duì)象中本身不存在的checked屬性來(lái)實(shí)現(xiàn)想要的功能。
深入響應(yīng)式原理
至于視圖更新時(shí)機(jī)可以看文檔深入響應(yīng)式原理
總結(jié)
以上所述是小編給大家介紹的Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項(xiàng)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue里swiper的一些坑及swiper在vue中的使用,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
Vue使用Props實(shí)現(xiàn)組件數(shù)據(jù)交互的示例代碼
在Vue中,組件的props屬性用于定義組件可以接收的外部數(shù)據(jù),這些數(shù)據(jù)來(lái)自父組件并傳遞給子組件,本文給大家介紹了Vue使用Props實(shí)現(xiàn)組件數(shù)據(jù)交互,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細(xì)介紹了Vue3中props傳參方式（多種數(shù)據(jù)類型傳參方式）的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
Vue插件實(shí)現(xiàn)過程中遇到的問題總結(jié)
隨著Vue.js越來(lái)越火,Vue.js 的相關(guān)插件也在不斷的被貢獻(xiàn)出來(lái),數(shù)不勝數(shù),這篇文章主要給大家介紹了關(guān)于Vue插件實(shí)現(xiàn)過程中遇到的問題,需要的朋友可以參考下2021-08-08
這篇文章主要為大家詳細(xì)介紹了vue中封裝組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),對(duì)我們深入了解vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
這篇文章主要介紹了vue腳手架項(xiàng)目創(chuàng)建步驟詳解，文章講解的很清晰，初學(xué)者可以跟著步驟學(xué)習(xí)下2021-03-03
一文帶你了解vite對(duì)瀏覽器的請(qǐng)求做了什么
Vite是一種新型前端構(gòu)建工具,能夠顯著提升前端開發(fā)體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vite對(duì)瀏覽器的請(qǐng)求做了什么的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12
默認(rèn)情況下，寫在.vue組件中的樣式會(huì)全局生效，因此很容易造成多個(gè)組件之間的樣式?jīng)_突問題。導(dǎo)致組件之間樣式?jīng)_突的根本原因，我們接下來(lái)探究一下2022-11-11
路由存在兩者模式,一種是歷史模式history,一種是hash模式,下面這篇文章主要給大家介紹了關(guān)于vite?vue3下配置history模式路由的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue 獲取視頻時(shí)長(zhǎng)的實(shí)例代碼
這篇文章主要介紹了vue 獲取視頻時(shí)長(zhǎng)的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08