Vue:使用定时器timer及其清理hook:beforeDestory

简介: Vue:使用定时器timer及其清理hook:beforeDestory

方式一:定义data中定义timer

export default {
  data() {
    return {
      // 定义定时器
      timer: null,
    };
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        // 需要做的事情
      }, 1000);
    },
    stopTimer() {
      clearInterval(this.timer);
      this.timer = null;
    },
  },
  mounted() {
    this.startTimer();
  },
  beforeDestroy() {
    this.stopTimer();
  },
};

方式二:监听事件hook:beforeDestroy

export default {
  methods: {
    startTimer() {
      // 启动计时器
      let timer = setInterval(() => {
        //需要做的事情
        console.log(11111);
      }, 1000);
      // 销毁计时器
      this.$once('hook:beforeDestroy', () => {
        clearInterval(timer);
        timer = null;
      });
    },
  },
  mounted() {
    this.startTimer();
  },
};

参考

vue项目中使用$.once(‘hook:beforeDestory‘,() => {})清理定时器问题

相关文章
Vue3使用hook封装常见的几种异步请求函数场景,让开发更加丝滑🚀🚀🚀
Vue3使用hook封装常见的几种异步请求函数场景,让开发更加丝滑🚀🚀🚀
|
6月前
|
JavaScript 前端开发 开发者
Vue3使用hook封装媒体查询和事件监听,使Vue的开发更加丝滑🚀🚀🚀
Vue3使用hook封装媒体查询和事件监听,使Vue的开发更加丝滑🚀🚀🚀
|
6月前
|
人工智能 自然语言处理 JavaScript
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook: “TypeError: Object(...) is not a func
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook: “TypeError: Object(...) is not a func
48 0
|
JavaScript 开发者
从 vue 源码看问题 —— 你知道 Hook Event 吗?
从 vue 源码看问题 —— 你知道 Hook Event 吗?
166 0
|
JavaScript
手动实现一个vue 实现了 模板 methods 和简单的hook
手动实现一个vue 实现了 模板 methods 和简单的hook
44 0
手动实现一个vue 实现了 模板 methods 和简单的hook
|
JavaScript
Vue:使用定时器timer及其清理hook:beforeDestory
Vue:使用定时器timer及其清理hook:beforeDestory
189 0
|
JavaScript 容器
[Vue warn]: Error in mount hook: “TypeError: Cannot read properties of null (reading ‘getAttribute‘)
[Vue warn]: Error in mount hook: “TypeError: Cannot read properties of null (reading ‘getAttribute‘)
4126 0
|
1天前
|
设计模式 JavaScript 前端开发
Vue源码学习需要哪些工具和技能
【4月更文挑战第20天】学习Vue源码需具备的工具与技能:VS Code或WebStorm作为代码编辑器,Node.js与npm管理依赖,Git操作仓库。基础包括JavaScript、ES6+语法、前端知识(HTML/CSS/浏览器原理)及Vue基础知识。进阶则需源码阅读理解能力,调试技巧,熟悉设计模式和架构思想。学习方法强调系统学习、实践与持续关注Vue最新动态。
17 8
|
1天前
|
JavaScript 前端开发 编译器
Vue 源码学习路线
【4月更文挑战第20天】探索Vue源码涉及响应式系统、虚拟DOM、模板编译等核心概念。先掌握Vue基础知识、JavaScript(ES6+)和前端工程化。从源码入口文件开始,研究响应式、虚拟DOM、模板编译、实例方法、全局API及生命周期。理解编译器和渲染器工作原理,实践编写Vue插件,参与开源项目,阅读相关文章教程,持续关注Vue最新动态。这是一个循序渐进、需要耐心和实践的过程。
7 1