I am currently developing an application that relies on a timer to update variables every second. The implementation involves using the "setInterval" function to initiate the timer and the "clearInterval" function to halt it. However, I feel like my current approach may not be optimal.
My attempt involved defining the timer as a ref variable within the setup function and clearing the timer in the "onUnmounted" lifecycle hook. Here is an example snippet of the code:
<script setup lang="ts">
import { ref, onUnmounted } from "vue";
const timer = ref(setInterval(() => {/* Bla bla bla. */}, 1000));
onUnmounted(() => {
clearInterval(timer.value);
})
<script>
Although this works, I question whether making the timer reactive is necessary. Are there alternative methods for achieving this task more efficiently, or does my existing code suffice?