关于vue3项目定时器无法关闭的情景处理

最近遇到一个问题，那就是我在某个页面上设置了定时器，但是当我离开这个页面时，这个定时器还在刷。

intervalID = ref("");
onMounted(() => {
  intervalID.value = setInterval(function () {
    getOrder();
  }, 3000);
});

就是上面这段代码，设置定时器自动获取订单，当我离开此页面进入其他页面时发现这个定时器还在不断的刷，这显然不是我想要的。

解决办法：

1、设置路由守卫，路由跳转时，删除定时器

onBeforeRouteLeave(async (to, from, next) => {
 //...其他逻辑
 clearInterval(intervalID.value); //确定退出 清除定时器
});

这个办法并不是很有效，有时候并不是跳转页面，而是关闭页面

2、钩子函数，卸载销毁

onUnmounted(() => {
  // 页面卸载时清除计时器
  if (intervalID.value) {
    clearTimeout(intervalID.value);
    intervalID.value = null;
  }
});

问题解决。
当我们学习vue的生命周期时候，很容易忽略卸载钩子函数，其实，卸载函数还是可以做很多事的。