一个Vue页面绑定多个定时器方法

1.this.$set(obj/arr,item/index,value)方法

+ 在onShow中获取数据

+ 将获取的数据进行遍历处理
this.timer =setInterval(()=>{
	this.mockData.forEach((item,index)=>{
		let result = this.getEndTimeInfo(item.endTime);
		item = Object.assign(item,result);  //合并对象
		this.$set(this.mockData,index, item) //强制刷新data中数据，保证数据响应式变化
	})
	console.log(this.mockData);
},1000)

+ 在页面退出之后需要清除定时器
destroyed(){ 
	clearInterval(this.timer);
	this.timer = null；
}

封装将时间戳转化为日期格式的方法
参数为倒计时结束时的时间戳
返回一个对象object，该对象包含了格式化后的月时分秒等诸多信息

getEndTimeInfo(endTime){
	let timeInfo = {
		isStopCountDown:false,
		day:'0',
		hour:'0',
		min:'0',
		sec:'0'
	};
	<!-- 时间不足0补0 -->
	function addZero(num){
		num = parseInt(num);
		return num < 10? '0'+ num : num.toString();
	}
	
	let nowDateStamp = new Date().getTime();
	let restTime = Math.round((endTime - nowDateStamp)/1000);
	if(restTime < 0){
		timeInfo.isStopCountDown = true;
		return timeInfo;
	}
	timeInfo.day = addZero(restTime / (60*60*24))
	timeInfo.hour = addZero(restTime / (60*60) % 24)
	timeInfo.min = addZero(restTime / 60 % 60)
	timeInfo.sec = addZero(restTime % 60)

	return timeInfo;
	
},

2.将结束时间传递给子组件方法

子组件接受两个参数，一个是结束时间targetTime，一个是显示的样式
1.组件mounted的时候，执行一次将targetTime格式化为分开的时分秒方法getTime
2.每一次函数执行结束，也就是给this赋值结束之后，又执行init方法
3.init方法就是延时一秒，再调用一次getTime方法
4.循环往复，直到倒计时结束

getTime() {
	/* 不满10给前面补0 */
	function formatNumber(num) {
		return num > 9 ? `${num}` : `0${num}`
	}
	/* 获取当前时间至倒计时结束的剩余时间为秒数 */
	const gapTime = Math.ceil((this.targetTime - new Date().getTime()) / 1000)
	if (gapTime >= 0) {
		this.day = formatNumber(parseInt(gapTime / 86400))
		this.hour = formatNumber(parseInt(gapTime / 3600) % 24)
		this.min = formatNumber(parseInt(gapTime / 60) % 60)
		this.sec = formatNumber(parseInt(gapTime % 60))
		// console.log(this.day, this.hour, this.min, this.sec);
		
		// 重复调用init方法 
		this.init()
	} else {
		this.isStopTiming = true;
	}
},