基于原生VUE的实时时间显示与更新

目前最为方便的就是day.js库。

但如果只使用原生vue设计并实现该功能，可以加深我们对VUE响应式更新的了解。 下面开始介绍思路：

实时显示一般由两大主要功能实现：实时获取与实时刷新。

在JS中我们能使用如下代码获取当前的日期对象

var date = new Date();

使用格式化函数进行日期的格式化显示

var getTime = function(date){
          
   
    var year = date.getFullYear();//获取年
    var month = date.getMonth()+1;//获取月，因JS中月从0开始，所以+1
    var day = date.getDay();//获取日
    var hour = date.getHours();//获取小时
    var minutes = date.getMinutes();//获取分钟
    var seconds = date.getSeconds();//获取秒
    return year+年+month+月+day+日+hour+":"+minutes+":"+seconds;//组装字符串
}

循环执行本函数即可实时获取时间

在VUE中创建时间显示组件，代码如下

<template>
  <div>
      <span>当前时间：{
         
  {time|parsetime}}</span>//用到了vue的filters钩子，对时间进行格式化
  </div>
</template>

在挂载时启动VUE定时器，用到了setInterval(function,time)函数，第一个参数为循环执行的函数，第二个参数为定时时长，单位毫秒。需要注意的是，启动的定时器需要在页面销毁时调用clearInterval销毁，代码如下

mounted(){
          
   
   this.timer = setInterval(this.refreshTime,1000);
},beforeDestroy(){
          
   
   	clearInterval(this.timer);
}

利用vue的响应式属性，将时间定义在Data代码块中，由定时器触发时间更新，进而触发VUE响应视图更新，将时间刷新。完整代码如下

<template>
  <div>
      <span>当前时间：{
         
  {time|parsetime}}</span>
  </div>
</template>

<script>
var getTime = function(){
           
    
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth();
    var day = date.getDay();
    var hour = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    return year+年+month+月+day+日+hour+":"+minutes+":"+seconds;
}
export default {
           
    
    name:timeDisplay,
    data(){
           
    
        return{
           
    
            time:
        }
    },
    filters:{
           
    
        parsetime:getTime
    },methods:{
           
    
        refreshTime(){
           
    
            var newtime = getTime();
            this.time = newtime;
        }
    }
    ,mounted(){
           
    
        this.timer = setInterval(this.refreshTime,1000);
    },beforeDestroy(){
           
    
        clearInterval(this.timer);
    }
}
</script>

<style>

</style>

最终效果如下，实现每秒更新。 如果对显示效果不满意，还改进格式化函数补0。代码实现如下

var addZero = function(value){
          
   
    return value<10 ? 0+value:value;
};

在组装月、日、时、分、秒字符串时，调用该函数补0，即可达成令人满意的显示效果。

虽然已经有使用起来方便快捷的dayjs代码库，但使用原生vue进行开发能让我们更好的掌握相关技术，在探究问题的过程中达到提升自己的目的。