vue.js小技巧之程序化的事件侦听器

最新推荐文章于 2022-11-17 22:12:23 发布

xvzhengyang

最新推荐文章于 2022-11-17 22:12:23 发布

阅读量290

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/xvzhengyang/article/details/105865758

vue.js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何在Vue中使用定时器并确保正确处理组件的生命周期，避免内存泄漏。通过实例展示了在组件挂载时创建定时器，并在组件销毁前清除定时器的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
<!-- 页面挂载时定义计时器，需要在页面销毁时清除定时器
    可以通过 $on 或 $once 监听页面生命周期销毁来解决这个问题：
 -->
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ id }}</h1>
    <p>程序化的事件侦听器</p>
  </div>
</template>

<script>
export default {
  name: "SkillFour",
  props: ["id"],
  data() {
    return {
      msg: "vue路由传参参数解耦"
    };
  },
  mounted() {
    this.creatInterval("hello");
    this.creatInterval("world");
  },
  methods: {
    creatInterval(msg) {
      let timer = setInterval(() => {
        console.log(msg);
      }, 1000);
      this.$once("hook:beforeDestroy", function() {
        clearInterval(timer);
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>