快捷導(dǎo)航

Vue組件重新渲染(組件重載)的3種實(shí)現(xiàn)方式

更新時(shí)間：2024年08月08日 08:47:21 作者：shimh_涼茶

這篇文章主要介紹了Vue組件重新渲染(組件重載)的3種實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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)前父頁面更新時(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)改變變量的值，

后來發(fā)現(xiàn)完全不用，直接放上去就可以。

缺點(diǎn)：

如果當(dāng)前組件同級(jí)有input輸入框就尷尬了
每次輸入都會(huì)重載這個(gè)CompTable組件
如果頁面有表單就只能用v-if的形式了

3.使用 $forceUpdate()

對(duì)于 數(shù)據(jù)更新 但 ui沒有更新 的情況下可以使用this.$forceUpdate

官方解釋： 迫使 Vue 實(shí)例重新渲染。注意它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。

希望這對(duì)你有幫助！

關(guān)于 $nextTick，官網(wǎng)上的說法：

為了在數(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)管理倉庫的項(xiàng)目實(shí)踐
本文主要介紹了vue3中使用pinia(大菠蘿)狀態(tài)管理倉庫，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
Vue使用Axios和elementui實(shí)現(xiàn)查詢分頁功能
當(dāng)今的Web開發(fā)趨勢(shì)中,前后端分離已經(jīng)成為一種流行的架構(gòu)模式,它將前端和后端的開發(fā)分離開來,使得前端和后端可以獨(dú)立進(jìn)行開發(fā)和部署,本文給大家介紹了Vue使用Axios和elementui實(shí)現(xiàn)查詢分頁功能,需要的朋友可以參考下
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ò)解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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ì)大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
Vue路由對(duì)象屬性 .meta $route.matched詳解
今天小編就為大家分享一篇Vue路由對(duì)象屬性 .meta $route.matched詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
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無法正常顯示的問題
今天小編就為大家分享一篇解決Vue 項(xiàng)目打包后favicon無法正常顯示的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue3.0手寫輪播圖效果
這篇文章主要為大家詳細(xì)介紹了Vue3.0手寫輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
vue同步父子組件和異步父子組件的生命周期順序問題
這篇文章主要介紹了vue同步父子組件和異步父子組件的生命周期順序問題,需要的朋友可以參考下
2018-10-10