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

需求描述

在控制台每秒打印一个"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 也会中断
相关推荐
wzyoung25 分钟前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
枣把儿2 小时前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
paopaokaka_luck2 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
一大树3 小时前
Vue3祖孙组件通信方法总结
前端·vue.js
coder_zhx3 小时前
Vue3自定义编程式弹窗
前端·vue.js
独立开阀者_FwtCoder3 小时前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者3 小时前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder3 小时前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder3 小时前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
rui锐rui4 小时前
商品销售数据分析实验
vue.js·数据挖掘·数据分析