vue 组件销毁并重置 (可用来解决某些情况写组件数据未重新渲染或者渲染后导致视图出现bug问题)

vue 组件销毁并重置 (可用来解决某些情况写组件数据未重新渲染或者渲染后导致视图出现bug问题)

方法1

当数据变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 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>

方法2(通过vue的:key的变化可以重新渲染组件或者重新渲染标签)

<template>
  <third-comp :key="menuKey"/>
</template>

<script>
  export default{
      data(){
         return {
               menuKey:1
           }
      },
      watch:{
            menuTree(){

               ++this.menuKey
           }
      }
}
</script>