vue组件销毁重置详解

v-if方式

<template>
   <third-comp v-if="reFresh"/>
</template>
 
<script>
   export default{
       data(){
          return {
                reFresh:true,
            }
       },
       watch:{
             menuTree(){
                  this.reFresh= false
                  this.$nextTick(()=>{
                    this.reFresh = true
                })
            }
       }
}
</script>

Vue.nextTick( [callback, context] )
参数： { Function } [ callback ] { Object } [ context ]
用法： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

总结：此方式实现了组件销毁并重新渲染

:key方式

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

<script>
  export default{
      data(){
         return {
               menuKey:0
           }
      },
      watch:{
      	$route() {
			++this.menuKey
		}
      }
}
</script>

总结：此方式实现了组件销毁并重新渲染

$destroy

vm.$destroy()
用法：完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。触发 beforeDestroy 和 destroyed 的钩子。
注意：在大多数场景中你不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。

destroyElement() {
  this.$destroy();
  this.$el.parentNode.removeChild(this.$el);
},

$destroy是组件内部销毁自已。和外部销毁(v-if)的区别在于，内部销毁不会移除页面上已有的DOM的。所以一般需要加上移除DOM的代码

$destroy函数只是在清理它和其它实例的连接和解除指令以及事件监听器，还有断掉虚拟dom和真实dom之间的联系，并没有真正地回收这个vue实例。

由于vue eventBus的$on绑定在根级别，$destroy在当前组件实例中没法给销毁掉，所以这个即使destroy后，总线的事件依旧被执行，而且由于注册事件的vue实例没有被回收，所以还可以进行常规的数据交互操作。

至于vue实例什么时候回收，这其实本质上是一个js的内存回收问题。只要存在还有其他对象对该实例的引用的话，这个实例还是不会被回收的。当当前程序没有对这个实例的引用的时候，这个vue实例就会被释放了。