vue 強(qiáng)制組件重新渲染(重置)的兩種方案
更新時(shí)間：2019年10月29日 09:14:44 作者：hmily43
今天小編就為大家分享一篇vue 強(qiáng)制組件重新渲染(重置)的兩種方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
數(shù)據(jù)通過(guò)異步操作后，對(duì)之前剛加載的數(shù)據(jù)進(jìn)行變更后，發(fā)現(xiàn)數(shù)據(jù)不能生效
方案一
當(dāng)數(shù)據(jù)變更后,通過(guò)watch 監(jiān)聽(tīng)，先去銷(xiāo)毀當(dāng)前的組件，然后再重現(xiàn)渲染。使用 v-if 可以解決這個(gè)問(wèn)題
<template>
<third-comp v-if="reFresh"/>
</template>
<script>
export default{
data(){
return {
reFresh:true,
menuTree:[]
}
},
watch:{
menuTree(){
this.reFresh= false
this.$nextTick(()=>{
this.reFresh = true
})
}
}
}
</script>
這種方式雖然可以實(shí)現(xiàn)，太不優(yōu)雅
方案二
通過(guò)vue key 實(shí)現(xiàn)，原理官方文檔。所以當(dāng)key 值變更時(shí)，會(huì)自動(dòng)的重新渲染。
<template>
<third-comp :key="menuKey"/>
</template>
<script>
export default{
data(){
return {
menuKey:1
}
},
watch:{
menuTree(){
++this.menuKey
}
}
}
</script>
以上這篇vue 強(qiáng)制組件重新渲染(重置)的兩種方案就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目開(kāi)發(fā)實(shí)現(xiàn)父組件與子組件數(shù)據(jù)間的雙向綁定原理及適用場(chǎng)景
在 Vue.js 中,實(shí)現(xiàn)父組件與子組件數(shù)據(jù)之間的雙向綁定,可以通過(guò)以下幾種方式,下面我將介紹幾種常見(jiàn)的方法,并解釋它們的實(shí)現(xiàn)原理和適用場(chǎng)景,感興趣的朋友跟隨小編一起看看吧2024-12-12
vue報(bào)錯(cuò)Failed to execute 'appendChild&apos
這篇文章主要為大家介紹了vue報(bào)錯(cuò)Failed to execute 'appendChild' on 'Node'解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vue Router是Vue提供的路由管理器,將組件與路由一一對(duì)應(yīng)起來(lái),這種對(duì)應(yīng)關(guān)系就路由,這篇文章主要介紹了Vue中vue-router路由使用,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue?遮罩和ref的使用，setup版和非setup版,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
在Vue3架構(gòu)里,v-slot 作為作用域插槽的關(guān)鍵支撐,重塑了父子組件間數(shù)據(jù)與方法傳遞的范式,本文主要來(lái)和大家剖析一下v-slot的相關(guān)特性,需要的可以了解下2025-01-01
京東 Vue3 組件庫(kù)支持小程序開(kāi)發(fā)的詳細(xì)流程
這篇文章主要介紹了京東 Vue3 組件庫(kù)支持小程序開(kāi)發(fā)的詳細(xì)流程，通過(guò)引入NutUI，即可在項(xiàng)目中使用，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-06-06
如何用VUE和Canvas實(shí)現(xiàn)雷霆戰(zhàn)機(jī)打字類(lèi)小游戲
這篇文章主要介紹了如何用VUE和Canvas實(shí)現(xiàn)雷霆戰(zhàn)機(jī)打字類(lèi)小游戲，麻雀雖小，五臟俱全，對(duì)游戲感興趣的同學(xué)，可以參考下，研究里面的原理和實(shí)現(xiàn)方法2021-04-04
vue中使用echarts繪制雙Y軸圖表時(shí)刻度沒(méi)有對(duì)齊的兩種解決方法(最新方案)
這篇文章主要介紹了vue中使用echarts繪制雙Y軸圖表時(shí)，刻度沒(méi)有對(duì)齊的兩種解決方法,主要原因是因?yàn)榭潭仍陲@示時(shí)，分割段數(shù)不一樣，導(dǎo)致左右的刻度線(xiàn)不一致，不能重合在一起，下面給大家分享解決方法，需要的朋友可以參考下2024-03-03
Vue?3?表單與后端數(shù)據(jù)交互之查詢(xún)并回顯數(shù)據(jù)步驟流程
本文給大家介紹Vue3表單與后端數(shù)據(jù)交互之查詢(xún)并回顯數(shù)據(jù)步驟流程,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-12-12
這篇文章主要介紹了vue keepAlive緩存清除問(wèn)題案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09