vue3 【实战】封装 “心跳“ 组件

需求描述

在控制台每秒打印一个"hello"

代码实现

<script setup>
import { onMounted, onBeforeUnmount, ref } from "vue";

const timer = ref(0);

onMounted(() => {
  function fn() {
    console.log("hello");
    timer.value = setTimeout(fn, 1000);
  }

  timer.value = setTimeout(fn, 1000);
});

onBeforeUnmount(() => {
  clearTimeout(timer.value);
});
</script>

<template>
  <div>心跳</div>
</template>

技术要点

• 卸载组件时，一定要记得清除定时器、自定义事件、DOM事件，避免内存泄漏/其他业务干扰
• 本例中使用 setTimeout 递归比 setInterval 更好，因为若页面出现卡顿，setInterval 也会中断