vue3 setup语法糖下的定时器的使用与销毁

更新时间：2024年02月04日 11:13:35 作者：yggjdle

如果在组件中需要使用定时器,注意在销毁组件的时候,要对定时器进行销毁,否则时间长了会导致页面卡顿,这篇文章给大家介绍vue3 setup语法糖下的定时器的使用与销毁的知识,感兴趣的朋友一起看看吧

vue3 setup语法糖下的定时器的使用与销毁

如果在组件中需要使用定时器，注意在销毁组件的时候，要对定时器进行销毁，否则时间长了会导致页面卡顿。

<script setup>
onMounted(() => {
  let timer = null;
//每5s刷新数据
  timer = setInterval(() => {
    getAmount();
  }, 5000);
})
onBeforeUnmount(() => {
  clearInterval(timer)
  timer = null;
})
</script>

补充：

Vue3 setup语法糖销毁一个或多个定时器（setTimeout或setInterval）

背景

如果在页面/组件增加了定时器，就算跳转到其他页面，定时器也不会被清理，这时候就需要手动清理，不然会有意想不到的bug，也会影响性能。

提示

setTimeout是只执行一次，setInterval是循环执行，以下是用setTimeout举例子，如果想要用setInterval，替换一次方法就行。

setTimeout替换成setInterval
clearTimeout替换成clearInterval

销毁一个定时器

<script setup>
import {onMounted, onUnmounted} from "vue";
//注意哈，这里是个空
const timer = ref()
//先创建一个定时器
onMounted(() => {
  timer.value=setTimeout(() => {
    // do something
  }, 1500)
})
//在页面销毁之前先销毁定时器
onUnmounted(() => {
  clearTimeout(timer.value)
  timer.value=""
})

销毁多个定时器

<script setup>
import {onMounted, onUnmounted} from "vue";
//注意哈，是个数组，不是对象，当然用对象的方式也行
const timer = ref([])
//先创建数个定时器
onMounted(() => {
  timer.value.push(setTimeout(() => {
    // do something
  }, 1500))
  timer.value.push(setTimeout(() => {
    // do something
  }, 1800))
})
//在页面销毁之前先销毁定时器
onUnmounted(() => {
  for (const timerElement of timer.value) {
    clearTimeout(timerElement)
  }
  timer.value=[]
})

到此这篇关于vue3 setup语法糖下的定时器的使用与销毁的文章就介绍到这了,更多相关vue3 setup语法糖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3中使用echarts的简单七个步骤(易懂,附紧急避坑)
近期在做一个vue3的项目,里面有个图表需求,因公司之前使用第三方封装的图表缺少文档,就去看了echars的官网文档,引入原生echars来实现,下面这篇文章主要给大家介绍了关于Vue3中使用echarts的简单七个步骤,需要的朋友可以参考下
2023-01-01
Vue跳转页面的几种常用方法总结
在Vue.js中,页面跳转是构建单页面应用（SPA）的基本操作之一,本文将介绍Vue中实现页面跳转的几种方法,并通过实例代码帮助理解每种方法的用法,需要的朋友可以参考下
2024-09-09
vue单页面实现当前页面刷新或跳转时提示保存
这篇文章主要介绍了vue单页面实现当前页面刷新或跳转时提示保存，在当前页面刷新或跳转时提示保存并可取消刷新，以防止填写的表单内容丢失，感兴趣的小伙伴们可以参考一下
2018-11-11
使用Vite+Vue3+Vant全家桶快速构建项目步骤详解
这篇文章主要为大家介绍了使用Vite+Vue3+Vant全家桶快速构建项目步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
Vue2.x Todo之自定义指令实现自动聚焦的方法
我们希望用户双击 todo 进入编辑状态后输入框自动获取焦点，而不是需要先手动点一下。这篇文章主要介绍了Vue 2.x Todo之自定义指令实现自动聚焦,非常具有实用价值，需要的朋友可以参考下
2019-01-01
解决vue项目运行提示Warnings while compiling.警告的问题
这篇文章主要介绍了解决vue项目运行提示Warnings while compiling.警告的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
VUE中使用路由router跳转页面多种方式
对于单页应用,官方提供了vue-router进行路由跳转的处理,这篇文章主要给大家介绍了关于VUE中使用路由router跳转页面的多种方式,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-05-05
Vue实现悬浮框自由移动+录音功能的示例代码
这篇文章主要为大家详细介绍了如何利用Vue实现悬浮框自由移动+录音功能，文中的示例代码讲解详细，感兴趣的小伙伴可以动手尝试一下
2022-07-07
浅谈el-table中使用虚拟列表对对表格进行优化
我们会经常使用表格，如果数据量大就直接可以分页，如果多条可能会影响表格的卡顿，那么应该如何进行优化，感兴趣的可以了解一下
2021-08-08
VueX浏览器刷新如何实现保存数据
这篇文章主要介绍了VueX浏览器刷新如何实现保存数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07