需求描述
在控制台每秒打印一个“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 也会中断
