亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue3 setup語法糖下的定時器的使用與銷毀

 更新時間：2024年02月04日 11:13:35   作者：yggjdle  
如果在組件中需要使用定時器,注意在銷毀組件的時候,要對定時器進(jìn)行銷毀,否則時間長了會導(dǎo)致頁面卡頓,這篇文章給大家介紹vue3 setup語法糖下的定時器的使用與銷毀的知識,感興趣的朋友一起看看吧

vue3 setup語法糖下的定時器的使用與銷毀

如果在組件中需要使用定時器，注意在銷毀組件的時候，要對定時器進(jìn)行銷毀，否則時間長了會導(dǎo)致頁面卡頓。

<script setup>
onMounted(() => {
  let timer = null;
//每5s刷新數(shù)據(jù)
  timer = setInterval(() => {
    getAmount();
  }, 5000);
})
onBeforeUnmount(() => {
  clearInterval(timer)
  timer = null;
})
</script>

補充：

Vue3 setup語法糖銷毀一個或多個定時器（setTimeout或setInterval）

背景

如果在頁面/組件增加了定時器，就算跳轉(zhuǎn)到其他頁面，定時器也不會被清理，這時候就需要手動清理，不然會有意想不到的bug，也會影響性能。

提示

setTimeout是只執(zhí)行一次，setInterval是循環(huán)執(zhí)行，以下是用setTimeout舉例子，如果想要用setInterval，替換一次方法就行。

  • setTimeout替換成setInterval
  • clearTimeout替換成clearInterval

銷毀一個定時器

<script setup>
import {onMounted, onUnmounted} from "vue";
//注意哈，這里是個空
const timer = ref()
//先創(chuàng)建一個定時器
onMounted(() => {
  timer.value=setTimeout(() => {
    // do something
  }, 1500)
})
//在頁面銷毀之前先銷毀定時器
onUnmounted(() => {
  clearTimeout(timer.value)
  timer.value=""
})

銷毀多個定時器

<script setup>
import {onMounted, onUnmounted} from "vue";
//注意哈，是個數(shù)組，不是對象，當(dāng)然用對象的方式也行
const timer = ref([])
//先創(chuàng)建數(shù)個定時器
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=[]
})

到此這篇關(guān)于vue3 setup語法糖下的定時器的使用與銷毀的文章就介紹到這了,更多相關(guān)vue3 setup語法糖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論