需求描述
在控制台每秒打印一个"hello"
代码实现
html
<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 也会中断