欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評(píng)論