一個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;
	}
},