Vue組件重新渲染(組件重載)的3種實(shí)現(xiàn)方式
我們?cè)陂_(kāi)發(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
官方解釋?zhuān)?/strong> 迫使 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)文章
vue3中使用pinia(大菠蘿)狀態(tài)管理倉(cāng)庫(kù)的項(xiàng)目實(shí)踐
本文主要介紹了vue3中使用pinia(大菠蘿)狀態(tài)管理倉(cāng)庫(kù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue使用Axios和elementui實(shí)現(xiàn)查詢(xún)分頁(yè)功能
當(dāng)今的Web開(kāi)發(fā)趨勢(shì)中,前后端分離已經(jīng)成為一種流行的架構(gòu)模式,它將前端和后端的開(kāi)發(fā)分離開(kāi)來(lái),使得前端和后端可以獨(dú)立進(jìn)行開(kāi)發(fā)和部署,本文給大家介紹了Vue使用Axios和elementui實(shí)現(xiàn)查詢(xún)分頁(yè)功能,需要的朋友可以參考下2024-06-06
vue金額格式化保留兩位小數(shù)的實(shí)現(xiàn)
這篇文章主要介紹了vue金額格式化保留兩位小數(shù)的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
el-upload多選文件上傳報(bào)錯(cuò)解決方案
本文主要介紹了el-upload多選文件上傳報(bào)錯(cuò)解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
使用axios請(qǐng)求時(shí),發(fā)送formData請(qǐng)求的示例
今天小編就為大家分享一篇使用axios請(qǐng)求時(shí),發(fā)送formData請(qǐng)求的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue路由對(duì)象屬性 .meta $route.matched詳解
今天小編就為大家分享一篇Vue路由對(duì)象屬性 .meta $route.matched詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue.prototype和vue.use的區(qū)別和注意點(diǎn)小結(jié)
這篇文章主要介紹了vue.prototype和vue.use的區(qū)別和注意點(diǎn)小結(jié),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
解決Vue 項(xiàng)目打包后favicon無(wú)法正常顯示的問(wèn)題
今天小編就為大家分享一篇解決Vue 項(xiàng)目打包后favicon無(wú)法正常顯示的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue3.0手寫(xiě)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue同步父子組件和異步父子組件的生命周期順序問(wèn)題
這篇文章主要介紹了vue同步父子組件和異步父子組件的生命周期順序問(wèn)題,需要的朋友可以參考下2018-10-10