vue3定时器,vue3清除定时器,vue3动态显示当前时间
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命名空间错误,参考下我的这个文章,声明一下类型即可
更多推荐
已为社区贡献2条内容
所有评论(0)