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 也会中断
相关推荐
Hexene...8 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情8 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
华子w9089258599 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
前端小趴菜0511 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
P7Dreamer11 小时前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js
I'm写代码11 小时前
el-tree树形结构笔记
javascript·vue.js·笔记
斯~内克12 小时前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
sunbyte13 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
markyankee10113 小时前
Vue 计算属性和侦听器详解
vue.js
盏茶作酒2914 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js