vue 強(qiáng)制組件重新渲染(重置)的兩種方案
更新時間：2019年10月29日 09:14:44 作者：hmily43
今天小編就為大家分享一篇vue 強(qiáng)制組件重新渲染(重置)的兩種方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
數(shù)據(jù)通過異步操作后，對之前剛加載的數(shù)據(jù)進(jìn)行變更后，發(fā)現(xiàn)數(shù)據(jù)不能生效
方案一
當(dāng)數(shù)據(jù)變更后,通過watch 監(jiān)聽，先去銷毀當(dāng)前的組件，然后再重現(xiàn)渲染。使用 v-if 可以解決這個問題
<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)雅
方案二
通過vue key 實(shí)現(xiàn)，原理官方文檔。所以當(dāng)key 值變更時，會自動的重新渲染。
<template>
<third-comp :key="menuKey"/>
</template>
<script>
export default{
data(){
return {
menuKey:1
}
},
watch:{
menuTree(){
++this.menuKey
}
}
}
</script>
以上這篇vue 強(qiáng)制組件重新渲染(重置)的兩種方案就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue編寫可顯示周和月模式的日歷 Vue自定義日歷內(nèi)容的顯示
這篇文章主要為大家詳細(xì)介紹了Vue編寫可顯示周和月模式的日歷，Vue自定義日歷內(nèi)容的顯示，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
Vue單頁及多頁應(yīng)用全局配置404頁面實(shí)踐記錄
無論單頁還是多頁，我的實(shí)現(xiàn)思路是總體配置404頁面的思路就是在前端路由表中添加一個 path: '/404' 的路由，渲染相應(yīng)的404頁面。這篇文章主要介紹了Vue單頁及多頁應(yīng)用全局配置404頁面實(shí)踐,需要的朋友可以參考下2018-05-05
Vue filter 過濾當(dāng)前時間 實(shí)現(xiàn)實(shí)時更新效果
這篇文章主要介紹了Vue filter 過濾當(dāng)前時間 實(shí)現(xiàn)實(shí)時更新效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
element?表格多級表頭子列固定的實(shí)現(xiàn)
本文主要介紹了element?表格多級表頭子列固定的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Vue使用fabric.js實(shí)現(xiàn)局部截圖與大圖預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了Vue如何使用fabric.js實(shí)現(xiàn)局部截圖與el-image-viewer大圖預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的可以了解下2024-02-02
這篇文章主要給大家介紹了關(guān)于Vuex中五個屬性以及使用的相關(guān)資料,Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購物車列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了微信小程序使用uni-app一鍵獲取用戶信息,需要的朋友可以參考下2023-01-01
Vue使用自定義指令實(shí)現(xiàn)頁面底部加水印
本文主要實(shí)現(xiàn)給項目的整個背景加上自定義水印，可以改變水印的文案和字體顏色等，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家詳細(xì)介紹了Vue3自定義drag指令的相關(guān)知識,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12