Skip to content

vue 清除定时器

由于是单页面,在页面切换后,定时器没有被清除,在再次回到页面时,使得两个定时器同时工作,时间流逝加倍。使用 beforeDestroy() 来清除定时器

所需要做的就是在页面销毁之前将可能没用完成的定时器清除,大致代码如下

html
<template>
  <p>{{ time }}</p>
  <buttom @click="start()">start</buttom>
</template>

<script>
export default {
  data() {
    return{
      time: 60
    };
  },
  methods: {
    start () {
      let timer = setInterval(() =>{
      	if (this.time > 0) {
      	  this.time--;
      	} else {
      	  clearInterval(timer);
          timer = null;
        }
      }, 1000);  
      this.$once('hook:beforeDestroy', () => {
      	clearInterval(timer);
      });
    }
  },
  // beforeDestroy 在销毁前将页面的定时器清除
  beforeDestroy() {
    clearInterval(this.timer);    
    this.timer = null;
  }
};
</script>

创建时间:

最近更新:

SVG 图像的使用及优化

SVG 图像的使用及优化

  • 对于一些简单的图标如果使用svg图标会比普通图片更小
  • svg 的图片是矢量图形,放大缩小不会产生锯齿
  • 支持通过 css 修改样式、增加动画
  • 自身也支持动画