vue3无法实时显示时间

想问下以下代码有什么问题吗？页面上的时间不走动，只有刷新了才会变更，不会自动实时显示？是出了什么问题？需要如何改正？

<div class="venue">
            <div class="box">
              <div class="state">
                <i :class="isOnline ? 'online-icon' : 'offline-icon'"></i>
                <p>{{ isOnline ? '正常' : '断开' }}</p>
              </div>

              <div class="pic">
                <img src="../assets/camera.jpg" alt="">
              </div>
              <div class="nowtime">
                <div class="time">
                  当前时间&nbsp:&nbsp<span v-html="datetime.nowTime"></span>
                </div>
              </div>
              <div class="smalltitle">
                <el-popover placement="bottom" width=" 150" trigger="hover" content="体育场-西北角"
                  :ref='popoverCode'>
                  <el-button class="v-title" slot="reference"
                    @click="visible = !visible">体育场..</el-button>
                </el-popover>
                <el-row class="smallbtn">
                  <el-button class="chg" @click="change" plain size="mini">修改</el-button>
                  <el-button class="cxl" @click="cancel" plain size="mini">删除</el-button>
                </el-row>
              </div>

            </div>
          </div>


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

  export default {
    setup() {
      const datetime = reactive({ nowTime: '' });
      const popoverCode = ref('');
      const visible = ref(false);
      const isOnline = ref(true);

      const change = () => {
        // 修改按钮逻辑
      };

      const cancel = () => {
        // 删除按钮逻辑
      };

      const updateNetworkStatus = () => {
        isOnline.value = navigator.onLine;
      };

      const getTime = () => {
        const myDate = new Date();
        const myYear = myDate.getFullYear();
        const myMonth = myDate.getMonth() + 1;
        const myToday = myDate.getDate();
        const myHour = myDate.getHours();
        const myMinute = myDate.getMinutes();
        const mySecond = myDate.getSeconds();

        datetime.nowTime = `${myYear}年${fillZero(myMonth)}月${fillZero(myToday)}日&nbsp;&nbsp;${fillZero(myHour)}:${fillZero(myMinute)}:${fillZero(mySecond)}`;
      };

      const fillZero = (str) => {
        let realNum;
        if (str < 10) {
          realNum = '0' + str;
        } else {
          realNum = str;
        }
        return realNum;
      };

      watchEffect(() => {
        getTime();
      });

      // 监听在线状态
      window.addEventListener('online', updateNetworkStatus);
      window.addEventListener('offline', updateNetworkStatus);

      return {
        datetime,
        popoverCode,
        visible,
        isOnline,
        change,
        cancel
      };
    }
  };
</script>

【以下回答由 GPT 生成】

问题分析: 根据提供的代码和问题描述，问题出现在时间显示上，页面上的时间不会实时更新。可能的原因是Vue模板在数据更新时没有进行重新渲染。

解决方案: 为了实现实时显示时间，可以使用Vue的computed属性来获取当前时间，并在模板中直接引用该属性。这样，每次组件数据更新时，computed属性会自动更新并触发模板重新渲染。

以下是对提供的代码进行优化的实现方案：

首先，在Vue组件中添加一个computed属性来获取当前时间：

computed: {
  nowTime() {
    const now = new Date();
    return now.toLocaleTimeString();
  }
}

然后，在模板中调用这个computed属性来实现实时显示时间：

<div class="nowtime">
  <div class="time">
    当前时间&nbsp;:&nbsp;<span>{{ nowTime }}</span>
  </div>
</div>

这样，每次组件数据更新时，nowTime属性都会被重新计算，从而实现实时更新时间的效果。

希望这个解决方案对你有帮助！如果还有任何问题，请随时提问。

【相关推荐】

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7685888
• 这篇博客你也可以参考下：vue3中怎么注册全局的组件，全局注册组件，只需创建组件不需要引入。不需要每个组件都引入自动引入。全局自定义指令图片懒加载的代码。
• 您还可以看一下 徐照兴老师的Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇课程中的 什么是单页面应用及实现前端路由的基本原理小节, 巩固相关知识点
  
• 除此之外, 这篇博客: vue3中组件跳转之后不显示中的 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素。 部分也许能够解决你的问题。