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实例就会被释放了。