如何在Vuejs3中删除DOM时停止js setInterval？

在Vue.js 3中，可以通过使用beforeUnmount生命周期钩子函数来停止setInterval定时器。beforeUnmount会在组件实例销毁之前被调用，可以在该钩子函数中执行清理操作。

下面是一个示例代码，演示如何在Vue.js 3中删除DOM时停止setInterval：

<template>
  <div>
    <button @click="startTimer">Start Timer</button>
    <button @click="stopTimer">Stop Timer</button>
  </div>
</template>

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

export default {
  setup() {
    const timer = ref(null);

    const startTimer = () => {
      timer.value = setInterval(() => {
        console.log('Timer is running...');
      }, 1000);
    };

    const stopTimer = () => {
      clearInterval(timer.value);
    };

    onBeforeUnmount(() => {
      clearInterval(timer.value);
    });

    return {
      startTimer,
      stopTimer
    };
  }
};
</script>

在上面的示例中，我们使用了ref来创建一个响应式的变量timer，用于存储setInterval返回的定时器ID。在startTimer方法中，我们使用setInterval创建一个定时器，并将其ID存储在timer中。在stopTimer方法中，我们通过clearInterval停止定时器。

另外，我们还使用了onBeforeUnmount钩子函数，在组件销毁之前清理定时器。在该钩子函数中，我们调用clearInterval停止定时器，并传入timer.value作为定时器ID。

这样，在组件销毁时，定时器会被正确地停止，避免了内存泄漏和不必要的计时操作。

推荐的腾讯云相关产品：腾讯云函数（Serverless Cloud Function），它是一种无服务器计算服务，可以帮助开发者更轻松地构建和管理应用程序。腾讯云函数支持多种编程语言，包括JavaScript，可以用于执行定时任务、处理事件触发等场景。

腾讯云函数产品介绍链接地址：腾讯云函数