vue3定时器，vue3清除定时器，vue3动态显示当前时间

 写法一 : 写在组件内

<script lang="ts" setup>
import dayjs from "dayjs";  //时间转换插件

let timer: number = 0;
let time = ref<string>("");

onMounted(() => {
  timer = setInterval(() => {
    //设置定时器
    getTime(); //自定义事件
  }, 1000);
});

onBeforeUnmount(() => {
  clearInterval(timer); //清除定时器
  timer = 0;
});

const getTime = () => {
  time.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
};

</script>

方法二：封装方法抽离出来

//useClock.ts

import dayjs from "dayjs"; //时间转换插件

export default function (format = "YYYY-MM-DD HH:mm:ss") {
  let timer: NodeJS.Timer | undefined;
  const time = ref("");
  const setTime = () => {
    time.value = dayjs().format(format);
  };
  onMounted(() => {
    setTime();
    timer = setInterval(() => {
      setTime();
    }, 1000);
  });
  onBeforeMount(() => {
    timer && clearInterval(timer);
  });

  return {
    time,
  };
}

 组件内引用：

<script lang="ts" setup>
import useClock from "@/hooks/useClock";
const { time } = useClock();
</script>

注：如果报node命名空间错误，参考下我的这个文章，声明一下类型即可