昨晚出了个bug,页面崩溃!我真是找bug找了将近一天,而且电脑卡了一整天,页面也崩溃了一整天,运行一会儿就崩了,到最后我发现,在任务管理器中Chrome浏览器占得内存都出现了几十万k,我真是找不出代码哪里有原因,最后只能一个组件一个组件的排查,当我把第一个时间组件先注释之后,内存立马被放空,**,原来是你!(这个组件同事写过了,说可以用,我也没咋看),最后发现似乎是个死循环?有大佬的话,帮我解释一下下面的代码,是不是死循环了?
不得已,时间组件只能自己写了,在这里介绍一个JS进行日期处理的库,个人感觉比较好用moment官网
首先,毫无疑问,下载!我是通过npm下载的
npm install moment --save
因为我直接用在时间组件里,所以直接require引用了,
let moment = require('moment'); //都这个时代了,尽可能的用ES6的写法吧
Time组件的diamante如下:
export default {
data() {
return {
year:'', //做变量渲染
day:'',
week:''
}
},
mounted() {
this.LopTime(); //在生命周期中调用LopTime()方法
},
props: [''],
computed: {},
methods: {
getTime(){
let week = [ //把一周七天用数组的形式方便获取时间索引
'星期日',
'星期一',
'星期二',
'星期三',
'星期四',
'星期五',
'星期六'
]
this.year = moment().format(" YYYY-MM-DD") //这里是库中已经声明好了的时间格式,具体的可以去官方文档查看
this.day = moment().format("HH:mm:ss")
this.week = week[moment().format("d")] //因为需求要展示的是中文的星期几,所以这里对week进行了处理,加了个索引
// console.log(this.week)
},
LopTime(){
setInterval(this.getTime,1000) //对获取的时间,用定时器让它动起来,定时器中调用getTime方法,注意不能加(),调用函数
}
}
}
现在对很少用原生来获取时间了,但还是要会的,原理要搞懂。
以后有机会交互从服务器获取时间,再进行介绍。
欢迎各位大佬批评指正!