Vue.js中使用Moment.js实现无需页面刷新的更新时间实时检测

问题出在你的currentTime没有实时更新——Vue的计算属性是依赖响应式数据变化触发重新计算的，如果你只初始化了一次currentTime，它不会自动变化，计算自然不会刷新。

具体解决步骤： #

1. 将currentTime声明为组件的响应式数据，初始化时设为当前时间
2. 用定时器每秒更新currentTime，触发计算属性的依赖追踪
3. 组件销毁时清除定时器，避免内存泄漏
4. 优化计算属性的逻辑，减少重复计算

完整代码示例： #

<template>
  <div>
    <!-- 超过5分钟时显示图标 -->
    <div v-if="minutesPassedSinceLastRefresh">
      <i class="icon-alert">数据已{{ minutesPassedSinceLastRefresh }}分钟未刷新</i>
    </div>
    <!-- 你的站点信息表格 -->
    <table>
      <!-- 表格内容 -->
      <tr>
        <td>最后刷新时间：{{ lastRefreshTime.format('YYYY-MM-DD HH:mm:ss') }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      currentTime: moment(),
      lastRefreshTime: moment(), // 替换为你的实际最后刷新时间
      refreshTimer: null
    };
  },
  mounted() {
    // 每秒更新当前时间
    this.refreshTimer = setInterval(() => {
      this.currentTime = moment();
    }, 1000);
  },
  beforeUnmount() {
    // 组件销毁时清除定时器
    clearInterval(this.refreshTimer);
  },
  computed: {
    minutesPassedSinceLastRefresh() {
      const timeDiff = this.currentTime.diff(this.lastRefreshTime, 'minutes');
      // 超过5分钟返回差值，否则返回null（不显示图标）
      return timeDiff >= 5 ? timeDiff : null;
    }
  }
};
</script>

原理说明： #

• 每秒更新的currentTime是响应式数据，每次变化都会触发计算属性重新计算时间差
• 计算属性会实时判断时间差是否超过5分钟，从而控制图标的显示/隐藏
• 清除定时器是为了避免组件销毁后定时器仍在运行，造成不必要的资源消耗

内容的提问来源于stack exchange，提问作者Shinwi