جاوااسکریپت - چگونه از setInterval و clearInterval در Vue.js 3 استفاده کنیم؟

من در حال نوشتن یک برنامه هستم که از یک تایمر برای بهروزرسانی متغیرها هر ثانیه استفاده میکند. این برنامه از تابع «setInterval» برای شروع تایمر و از تابع «clearInterval» برای متوقف کردن آن استفاده میکند. و فکر نمیکنم روشی که برای این کار دارم کافی باشد.

من سعی کردم تایمر را به عنوان یک متغیر ref در تابع setup تعریف کنم و تایمر را در هوک چرخه عمر "onUnmounted" پاک کنم، مانند کد نمونه زیر:

<script setup lang="ts">
import { ref, onUnmounted } from "vue";

const timer = ref(setInterval(() => {/* Bla bla bla. */}, 1000));

onUnmounted(() => {
  clearInterval(timer.value);
})
<script>

اما فکر نمیکنم ضروری باشد تایمر واکنشگرا شود، آیا راه بهتری برای انجام این کار وجود دارد؟ یا کد من روش خوبی است؟

پاسخ شماره ۱

اگر میتوانید از کتابخانهها استفاده کنید، از کتابخانهها استفاده کنید https://vueuse.org/shared/useIntervalFn/

import { useIntervalFn } from '@vueuse/core'

const { pause, resume, isActive } = useIntervalFn(() => {
  /* your function */
}, 1000)

در غیر این صورت، یک ترکیبی بسازید

function useIntervalFn(cb: () => void, ms: number) {
   let int: number = 0;
   onMounted(() => int = setInterval(cb, ms));
   onUnmounted(() => clearInterval(int));
}