在Vue中，如何移除定時(shí)器？

<template>
  <div>倒計(jì)時(shí)：{{ count }}</div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';

const count = ref(10);
let timer = null; // 保存定時(shí)器ID

onMounted(() => {
  // 創(chuàng)建定時(shí)器，保存ID到timer
  timer = setInterval(() => {
    count.value--;
    if (count.value <= 0) {
      clearInterval(timer); // 提前結(jié)束時(shí)主動(dòng)清除
      timer = null; // 清空ID
    }
  }, 1000);
});

onUnmounted(() => {
  // 組件卸載時(shí)強(qiáng)制清除定時(shí)器（關(guān)鍵步驟）
  if (timer) {
    clearInterval(timer);
    timer = null; // 釋放引用
  }
});
</script>

<template>
  <div>延遲執(zhí)行示例</div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';

let timeout = null; // 保存延遲定時(shí)器ID

onMounted(() => {
  // 2秒后執(zhí)行一次
  timeout = setTimeout(() => {
    console.log('延遲執(zhí)行完成');
    timeout = null; // 執(zhí)行后清空ID
  }, 2000);
});

onUnmounted(() => {
  // 組件卸載時(shí)若定時(shí)器未執(zhí)行，強(qiáng)制清除
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
});
</script>

<template>
  <button @click="startTimer">開(kāi)始計(jì)時(shí)</button>
</template>

<script setup>
import { onUnmounted, ref } from 'vue';

let timer = null;
const count = ref(0);

const startTimer = () => {
  // 啟動(dòng)前先清除已有定時(shí)器（避免重復(fù)創(chuàng)建）
  if (timer) clearInterval(timer);
  timer = setInterval(() => {
    count.value++;
  }, 1000);
};

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});
</script>

<template>
  <div>計(jì)數(shù)器：{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      timer: null // 保存定時(shí)器ID到組件實(shí)例
    };
  },
  mounted() {
    // 創(chuàng)建定時(shí)器，保存ID
    this.timer = setInterval(() => {
      this.count++;
    }, 1000);
  },
  beforeDestroy() {
    // 組件銷(xiāo)毀前清除定時(shí)器（關(guān)鍵）
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null; // 釋放引用
    }
  }
};
</script>

<template>
  <div v-if="showTimer">動(dòng)態(tài)定時(shí)器</div>
</template>

<script>
export default {
  data() {
    return {
      showTimer: true,
      timer: null
    };
  },
  methods: {
    startTimer() {
      if (!this.timer) {
        this.timer = setInterval(() => {
          console.log('運(yùn)行中...');
        }, 500);
      }
    }
  },
  mounted() {
    if (this.showTimer) {
      this.startTimer();
    }
  },
  beforeDestroy() {
    // 無(wú)論showTimer是否為true，都強(qiáng)制清除
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>