vue.js和原生js时间自动累加功能

引入主体

需求： 在页面上展示当前时间 格式为 年-月-日 时:分:秒
首先我先简单说一下我项目的需求把，因为我们这边是做的保密项目，可能用户考虑到安全问题，不要我们用js内置的方法去newDate或者当前客户端的时间，需要我们或者后台服务器上的时间。说到这里可能有些小伙伴就觉得很简单了脑海里就有了一些想法了！比如：直接叫后端把时间返回给你呀 你每秒钟请求一次就行了呀。但实际效果真的是这样的吗？下面我给你说一下这样做不好的原因把 其一：你不能保证发送接口 在一秒之内你能拿到数据并且重新渲染Dom因为接口都是存在网络原因的哦！！！

解决方案： 下面就让我来给大家用一个简单的方法来实现这个功能自加把！

1.首先大家应该想到的是你应该找后端准备一个接口给你一个初始时间的数据如下：

 // 获取服务器时间
    getServiceTimeDataFunc() {
      // 在这里我还是建议大家使用async/await 简单来说它们的作用就是随便怎么样都会拿到一个结果
      getServiceTimeData().then((res) => {
        // res 就是初始(当前)时间数据 例如:2021-07-09 15:48:06
        // test 即为我具体的时间方法
        this.test(new Date(res));
      });
    },

2.初始时间数据有了我们就需要让它自己累加，自动去改变时分秒 年月日了。具体如下：

test(date) {
      // 首先肯定要有一个传入的形参(date)用来初始化 这个date就是你接口获取的初始时间
      // 其二我们肯定需要计时器setInterval 给它每秒执行一次 这样我们的数据才会一直走动
      setInterval(() => {
        // addtime 定义的一个变量 用来接收自动累加的时间 date.setSeconds()这个方法作用就是设置秒的时间
        let addtime = new Date(date.setSeconds(date.getSeconds() + 1));
        // yMd 是我在data 定义用来接收年月日的变量 .getFullYear() .getMonth() .getDate()这三个方法都是用来转换日期格式
        this.yMd = addtime.getFullYear() + '-' + (addtime.getMonth() + 1).toString().padStart(2,'0') + '-' + addtime.getDate().toString().padStart(2,'0')
         // times 是我在data 定义用来接收时分秒的变量 .getHours() .getMinutes() .getSeconds()这三个方法都是用来转换日期格式
        this.times = addtime.getHours().toString().padStart(2,'0') + ':' + addtime.getMinutes().toString().padStart(2,'0') + ':' + addtime.getSeconds().toString().padStart(2,'0')
        /* 
          最后你会发现为什么它们要用toString()和padStart()这两个方法呢
            因为.padStart()这个方法是Es6字符串中的方法其作用就是用来判断当前字符串有几个 我们这种写法就是.padStart(2,'0')如果它有两个就不加0 没有就自动补充0 这样在页面上也好看一点
              大家都知道js是弱类型语音 它们在换算时可能会隐式转换 所以我建议大家这种时候还是手动转换一下比较好
        */
      }, 1000);
    },

最后就是大家觉得我有什么不足的，没有写好或者没有表达清楚的可以给我私信或者评论区留言哦！！！