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

vue 強制組件重新渲染(重置)的兩種方案

 更新時間：2019年10月29日 09:14:44   作者：hmily43  
今天小編就為大家分享一篇vue 強制組件重新渲染(重置)的兩種方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

數(shù)據(jù)通過異步操作后，對之前剛加載的數(shù)據(jù)進行變更后，發(fā)現(xiàn)數(shù)據(jù)不能生效

方案一

當數(shù)據(jù)變更后,通過watch 監(jiān)聽，先去銷毀當前的組件，然后再重現(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>

這種方式雖然可以實現(xiàn)，太不優(yōu)雅

方案二

通過vue key 實現(xiàn)，原理官方文檔。所以當key 值變更時，會自動的重新渲染。

<template>
 <third-comp :key="menuKey"/>
</template>
 
<script>
 export default{
 data(){
  return {
  menuKey:1
  }
 },
 watch:{
  menuTree(){
 
  ++this.menuKey
  }
 }
}
</script>

以上這篇vue 強制組件重新渲染(重置)的兩種方案就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論