记录vue中component切换组件时销毁定时器问题

问题描述：有A、B两个子组件，通过component进行切换，子组件中有定时器，当切换组件时需要把定时器给注销掉。

1、通过VUE组件生命周期进行删除定时器

2、使用this.$once来监听定时器

3、....

组件生命周期详细：https://www.cnblogs.com/wangjiachen666/p/9497749.html

使用this.$once参考：https://juejin.im/post/5cc17b88f265da03705fbbbe

以下测试代码，其中A.vue为生命周期删除，B.vue为this.$once监听删除

Test.vue

<template><div id="testdiv"><component ref="a" :is="assembly" :key="assembly"></component><ul><liclass="basis"v-for="(item,index) in submenuarr":key="index"@click="SwitchPath(item,index)":class="{on:cur==index}">{{item}}</li></ul></div>
</template><script>import taba from './A'import tabb from './B'export default {components: { taba, tabb },props: {},data() {return {assembly: 'taba', //默认acur: 0,submenuarr: ['taba', 'tabb'], //子菜单}},watch: {},computed: {},methods: {//初始化子菜单init() {var arr = ['taba', 'tabb']this.submenuarr = arr},//子菜单切换SwitchPath(name, number) {const _this = this_this.assembly = name //切换_this.cur = number},},created() {},mounted() {},}
</script><style scoped>#testdiv{background-color: #ffffff;}
</style>

A.vue

<template><p>这是A页面,测试：{{num}}</p>
</template><script>export default {name: 'A',data() {return {interval: '',num: 0,}},mounted() {this.interval= setInterval(() => {this.num++},1000);},beforeDestroy:function(){//beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...console.log("A页面beforeDestroy清除定时器");clearInterval(this.interval)},}
</script><style scoped></style>

B.vue

<template><p>这是B页面,测试{{num}}</p>
</template><script>export default {name: 'B',data() {return {interval: '',num: 1000,}},mounted() {const timer = setInterval(() =>{this.num+=500}, 1000);// 通过$once来监听定时器// 在beforeDestroy钩子触发时清除定时器this.$once('hook:beforeDestroy', () => {console.log("this.$once监听定时器")clearInterval(timer);})},}
</script><style scoped></style>

效果：

如果在comprnent组件外加上keep-alive后，上述的删除定时器方法就会失效了。

参考：http://www.3qphp.com/web/javascript/5103.html

测试代码新增C.vue,并且comprnent组件外加上keep-alive

<template><p>这是C页面,测试：{{cnum}}</p>
</template><script>export default {name: 'C',data() {return {interval: '',cnum: 0,}},methods: {},mounted() {},beforeDestroy:function(){//beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...console.log("C页面beforeDestroy清除定时器");clearInterval(this.interval)},activated(){//缓存的组件重新激活时调用this.interval= setInterval(() => {this.cnum+=100000console.log("cnum+=100000",this.cnum)},1000);console.log("activated重新激活，cnum="+this.cnum)},deactivated(){//缓存的组件停用时调用clearInterval(this.interval)console.log("deactivated暂停，cnum="+this.cnum)}}
</script><style scoped></style>

效果展示

如有问题，欢迎指正！毕竟我只是个打杂的！

记录vue中component切换组件时销毁定时器问题相关推荐

vue2.0中组建里面套用组件_vue19 组建 Vue.extend component、组件模版、动态组件的实例代码...
具体代码如下所示: document var aaa=vue.extend({//继承出来一个vue类aaa template:' 我是标题3 ' }); var a=new aaa();//a跟vm ...
【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
vue中写svg组件svg图片加载不出来
vue中写svg组件svg图片加载不出来结构首先要安装3个插件:svg-sprite-loader,svgo,svgo-loader npm install svg-sprite-loader - ...
Document.visibilityState 页面监听 vue中实现离开页面时计时停止：停止计时后从上一次开始计时
概述 Document.visibilityState (只读属性), 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签 ...
vue中，兄弟组件之间传值
vue中,兄弟组件之间传值项目中,需要使用多个子组件,当需要传递值的时候,较为麻烦,怎样实现呢 1.一般可以使用子组件a传递给父组件,再由父组件传递给子组件b.但是一般较为麻烦, 2.使用bus作为 ...
Vue中，一个组件调用其他组件的方法（非父子组件）
Vue中,一个组件调用其他组件的方法(非父子组件) 场景--B页面(组件)想调用 A页面(组件)中的方法:但是两个页面(组件)毫无关联(刷新 A的数据). 方式一:引用式 1.当前组件引入将要调用方法 ...
笔记三 vue中封装复用过滤器自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...
vue中tab切换前端实现_vue实现Tab切换功能
在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换.Tab动态组件切换.通过v-show设置Tab显示隐藏.每种方法实现起来其实 ...

记录vue中component切换组件时销毁定时器问题

记录vue中component切换组件时销毁定时器问题相关推荐

最新文章

热门文章