Vue組件重新渲染(組件重載)的3種實現(xiàn)方式
我們在開發(fā)過程中頁面狀態(tài)變化時，
有時會需要一部分組件重新渲染，
讓這些組件里的生命周期重新走一遍
下面提供 3種 方式
1.使用 v-if
v-if可以實現(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)同時將tableShow設(shè)置false和true有可能導(dǎo)致組件渲染失敗
this.$nextTick(function(){
// 加載
this.tableShow= true
})
},
}2.使用組件中的 :key （推薦）
這個最簡單實用，
如果需要每次在當前父頁面更新時重載CompTable這個子組件就可以用這個方法，
每次父組件更新 :key 都會重新取值，而時間戳每次都是不同的，
組件發(fā)現(xiàn) :key發(fā)生變化就會重新渲染
// html <CompTable ref="CompTable" :key="new Date().getTime()"/>
起初我還擔心如果把 new Date().getTime() 直接放到 :key 中，
會不會不生效，要不要傳個變量給key，
然后像v-if一樣手動改變變量的值，
后來發(fā)現(xiàn)完全不用，直接放上去就可以。
缺點：
- 如果當前組件同級有input輸入框就尷尬了
- 每次輸入都會重載這個CompTable組件
- 如果頁面有表單就只能用v-if的形式了
3.使用 $forceUpdate()
對于 數(shù)據(jù)更新 但 ui沒有更新 的情況下可以使用this.$forceUpdate
官方解釋： 迫使 Vue 實例重新渲染。注意它僅僅影響實例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。
希望這對你有幫助！
關(guān)于 $nextTick，官網(wǎng)上的說法：
為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM，可以在數(shù)據(jù)變化之后立即 使用 Vue.nextTick(callback)。這樣 回調(diào)函數(shù)將在 DOM 更新完成后被調(diào)用。
官網(wǎng)參考：深入響應(yīng)式原理-異步更新隊列
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中使用pinia(大菠蘿)狀態(tài)管理倉庫的項目實踐
本文主要介紹了vue3中使用pinia(大菠蘿)狀態(tài)管理倉庫，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue使用Axios和elementui實現(xiàn)查詢分頁功能
當今的Web開發(fā)趨勢中,前后端分離已經(jīng)成為一種流行的架構(gòu)模式,它將前端和后端的開發(fā)分離開來,使得前端和后端可以獨立進行開發(fā)和部署,本文給大家介紹了Vue使用Axios和elementui實現(xiàn)查詢分頁功能,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue金額格式化保留兩位小數(shù)的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了el-upload多選文件上傳報錯解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
使用axios請求時,發(fā)送formData請求的示例
今天小編就為大家分享一篇使用axios請求時,發(fā)送formData請求的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue路由對象屬性 .meta $route.matched詳解
今天小編就為大家分享一篇Vue路由對象屬性 .meta $route.matched詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue.prototype和vue.use的區(qū)別和注意點小結(jié)
這篇文章主要介紹了vue.prototype和vue.use的區(qū)別和注意點小結(jié),本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
今天小編就為大家分享一篇解決Vue 項目打包后favicon無法正常顯示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Vue3.0手寫輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue同步父子組件和異步父子組件的生命周期順序問題,需要的朋友可以參考下2018-10-10