Vue組件重新渲染(組件重載)的3種實(shí)現(xiàn)方式
我們?cè)陂_發(fā)過(guò)程中頁(yè)面狀態(tài)變化時(shí)，
有時(shí)會(huì)需要一部分組件重新渲染，
讓這些組件里的生命周期重新走一遍
下面提供 3種 方式
1.使用 v-if
v-if可以實(shí)現(xiàn) true (加載)和false(卸載)
// html
<CompTable ref="CompTable" v-if="tableShow"/>
// js
data() {
return {
tableShow: true,
}
}
method: {
// 觸發(fā)更新事件
updateTable(){
// 卸載
this.tableShow= false
// 建議加上 nextTick 微任務(wù)
// 否則在同一事件內(nèi)同時(shí)將tableShow設(shè)置false和true有可能導(dǎo)致組件渲染失敗
this.$nextTick(function(){
// 加載
this.tableShow= true
})
},
}2.使用組件中的 :key （推薦）
這個(gè)最簡(jiǎn)單實(shí)用，
如果需要每次在當(dāng)前父頁(yè)面更新時(shí)重載CompTable這個(gè)子組件就可以用這個(gè)方法，
每次父組件更新 :key 都會(huì)重新取值，而時(shí)間戳每次都是不同的，
組件發(fā)現(xiàn) :key發(fā)生變化就會(huì)重新渲染
// html <CompTable ref="CompTable" :key="new Date().getTime()"/>
起初我還擔(dān)心如果把 new Date().getTime() 直接放到 :key 中，
會(huì)不會(huì)不生效，要不要傳個(gè)變量給key，
然后像v-if一樣手動(dòng)改變變量的值，
后來(lái)發(fā)現(xiàn)完全不用，直接放上去就可以。
缺點(diǎn)：
- 如果當(dāng)前組件同級(jí)有input輸入框就尷尬了
- 每次輸入都會(huì)重載這個(gè)CompTable組件
- 如果頁(yè)面有表單就只能用v-if的形式了
3.使用 $forceUpdate()
對(duì)于 數(shù)據(jù)更新 但 ui沒(méi)有更新 的情況下可以使用this.$forceUpdate
官方解釋： 迫使 Vue 實(shí)例重新渲染。注意它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。
希望這對(duì)你有幫助！
關(guān)于 $nextTick，官網(wǎng)上的說(shuō)法：
為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM，可以在數(shù)據(jù)變化之后立即 使用 Vue.nextTick(callback)。這樣 回調(diào)函數(shù)將在 DOM 更新完成后被調(diào)用。
官網(wǎng)參考：深入響應(yīng)式原理-異步更新隊(duì)列
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
圖表在我們的項(xiàng)目中可以幫我們很明確的看到我們想要看到的數(shù)據(jù)，本文將主要介紹Echart圖表在項(xiàng)目中前后端使用的詳細(xì)教程，感興趣的同學(xué)可以學(xué)習(xí)一下2021-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)用戶登錄切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
今天小編就為大家分享一篇vue-自定義組件傳值的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue使用vuedraggable插件實(shí)現(xiàn)拖拽效果
這篇文章主要介紹了vue使用vuedraggable插件實(shí)現(xiàn)拖拽效果,本文分步驟介紹了安裝vuedraggable插件的方法及頁(yè)面引入的方法,需要的朋友可以參考下2024-04-04
vue 請(qǐng)求后臺(tái)數(shù)據(jù)的實(shí)例代碼
本篇文章主要介紹了vue 請(qǐng)求后臺(tái)數(shù)據(jù)的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧、2017-06-06
基于vue2.0實(shí)現(xiàn)仿百度前端分頁(yè)效果附實(shí)現(xiàn)代碼
本文通過(guò)實(shí)例代碼給大家介紹了基于vue2.0實(shí)現(xiàn)仿百度前端分頁(yè)效果,在文中給大家記錄了遇到的問(wèn)題及解決方法，需要的朋友可以參考下2018-10-10
vue子組件封裝彈框只能執(zhí)行一次的mounted問(wèn)題及解決
這篇文章主要介紹了vue子組件封裝彈框只能執(zhí)行一次的mounted問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)通知或詳情類彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue3中使用ref和emit來(lái)減少props的使用示例詳解
現(xiàn)在在開發(fā)vue3項(xiàng)目的過(guò)程中，我們開發(fā)小組漸漸的減少props的使用，轉(zhuǎn)而用ref 和 emit 來(lái)代替，這篇文章主要介紹了vue3中使用ref和emit來(lái)減少props的使用,需要的朋友可以參考下2022-06-06
vue實(shí)現(xiàn)websocket客服聊天功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)websocket客服聊天功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10