前言

vue3后还没仔细研究过具体改动，时间被催的比较急看了几节课稍微回顾了一下vue的知识点，发现出了一个组合式API——setup官网地址。 这一块还没仔细认真研究，生命周期钩子函数也有一些微妙的改变生命周期函数 和 生命周期钩子。 过几天任务完成了再好好看看。现在先记录时间实时更新。

解决方案

先说解决方案再说思考过程，就放TS代码，html代码直接用就行，上代码（去除一些无关代码）：

import { onMounted, reactive, toRefs } from 'vue'
const state = reactive({
    nowTime: new Date().toLocaleString(),
})

function getnowTime(nowTime: any): any {
    setInterval(() => {
        let date = new Date();
        nowTime.value = date.toLocaleString();
    }, 1000)
}
onMounted(() => {
    getnowTime(nowTime)
});
const { nowTime } = toRefs(state)

简单讲解一下代码，首先import引入，然后用reactive返回对象响应式副本建立变量nowTime，建立的时候进行初始化，本来直接new Date就行，后面跟着的方法是我为了看的方便加的。然后创建getnowTime函数，这个函数的作用是实时获取当前时间对象对前面变量nowTime进行更新，延时函数执行间隔一秒。最后在生命周期函数中执行这个延时函数。最后的最后把它导出。当然我个人觉得这个代码肯定性能不是特别好，但是比较赶时间就先凑合一下，后面用timer再进行优化。

错误理解

在一开始按照网上案例，参照 别人的文章稍微修改后这么写的：

import { onMounted, reactive, toRefs } from 'vue'
const state = reactive({
    circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    userText: "管理员",
    projectName: "养老院管理系统",
    timer: " ",
    nowTime: new Date().toLocaleString(),
})

function getnowTime(nowTime: any): any {
    timer = setInterval(() => {
        nowTime = new Date() // 修改数据date
    }, 500)
}
onMounted(() => {
    getnowTime(nowTime)
});
const { circleUrl, userText, projectName, nowTime,timer } = toRefs(state)

写完后会报错： 无法分配到 "timer" ，因为它是常数 菜鸟技术有限每个字都看得懂，但是连在一起就不是特别理解了，有时间要好好看看new 这个 Date到底做了什么，暂时没想到处理结果，也不是特别理解timer这个定时器为什么别人用的可行。

于是我猜想是不是生命周期函数没用对，数据没更新，抱着这个想法看着vue的生命周期函数对着试了几个生命周期函数，去掉了timer，添加了打印，最后得出的结果就是onMounted没用错。

function getnowTime(nowTime: any): any {
    setInterval(() => {
        let date = new Date();
        nowTime = date.toLocaleString();
        console.log(nowTime);
    }, 1000)
}

生命周期函数没用错，打印的数据也没有问题，会不会是异步问题？

我百度了半天没找到解决方案，于是我打算先写个number类型的数据，从这个number数据进行延伸，后面发现一样的错误，number数据根本没有更新，通过打印这个number发现他不是数字。

然后打印number.value才是数字，这就把出错的原因找出来了，然后对应修改就可以正常运行了。