vue组件销毁重置详解

v-if方式
:key方式
$destroy

v-if方式

<template><third-comp v-if="reFresh"/>
</template><script>export default{data(){return {reFresh:true,}},watch:{menuTree(){this.reFresh= falsethis.$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实例就会被释放了。

vue组件销毁重置详解相关推荐

Vue组件间通信方式(详解)
1. 组件之间的传值通信组件之间通讯分为三种: 父传子.子传父.兄弟组件之间的通讯 (1)props/$emit 父传子:父组件通过import引入子组件,并注册,在子组件标签上添加要传递的属性,子 ...
vue组件keep-alive知识详解
keep-alive是vue内置的一个组件,而这个组件的作用就是能够缓存不活动的组件,我们能够知道,一般情况下,组件进行切换的时候,默认会进行销毁,如果有需求,某个组件切换后不进行销毁,而是保存之前的 ...
Vue组件间传值详解
文章目录 1. 父组件向子组件传值 1.1 描述 1.2 props接收数据: 2. 子组件向父组件传值 3. 兄弟组件间传值 4. 事件总线 5. Ref 6. root/parent/childr ...
Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)详解
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
java和vue实现拖拽可视化_Vue拖拽组件开发实例详解
摘要:这篇Vue栏目下的"Vue拖拽组件开发实例详解",介绍的技术点是"Vue拖拽组件开发实例.vue拖拽组件.拖拽组件.组件开发.开发实例.实例详解",希望对 ...
实例化vue发生了什么?(详解vue生命周期)
实例化vue发生了什么?(详解vue生命周期) 本文将对vue的生命周期进行详细的讲解,让你了解一个vue实例的诞生都经历了什么~ 我在Github上建立了一个存放vue笔记的仓库,以后会陆续更新一些 ...
vue中mint-ui使用详解
这次给大家带来vue中mint-ui使用详解,vue中mint-ui使用的注意事项有哪些,下面就是实战案例,一起来看一下. mint-ui在vue中的使用,供大家参考,具体内容如下首先放上mint- ...
加载vue文件步骤_vue中.vue文件解析步骤详解
这次给大家带来vue中.vue文件解析步骤详解,vue中.vue文件解析的注意事项有哪些,下面就是实战案例,一起来看一下. 我们平时写的 .vue 文件称为 SFC(Single File Compo ...
vue基础扩展8--solt详解
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><title& ...

vue组件销毁重置详解

v-if方式

:key方式

$destroy

vue组件销毁重置详解相关推荐

最新文章

热门文章