首先是背景，一個簡單的答題web app，想加入一個倒計時功能，每當打開新的一題的時候重新從10倒計時到0，如果倒計時到0了還沒有做出選擇，將看做放棄選擇，進入下一題。

因為我要實現(xiàn)的功能是10s倒計時并且切換到下一頁，因為之前寫法的問題，我切換去下一頁路由并沒有改變，只是引用了一個數(shù)組中的不同的index。

我最開始怕麻煩引入了vue2-countdown組件，直接npm安裝就可以了。但是這個組件因為很久沒有維修了出了點問題。我們需要自己更改一下。
首先是視圖部分作者注釋掉了一些顯示，我根據(jù)我自己的需要改了一下，把天和小時注釋掉了。并且給最后需要顯示的增加了class方便設置水平居中。

<template><div><p v-if="msTime.show"><span v-if="tipShow" class="test2">{{tipText}}:</span><span v-if="!tipShow">{{tipTextEnd}}</span><span v-if="msTime.day>0"><span>{{msTime.day}}</span><i>{{dayTxt}}</i></span> <!-- <span>{{msTime.hour}}</span><i>{{hourTxt}}</i>--> <!-- <span>{{msTime.minutes}}</span><i>{{minutesTxt}}</i>--><span >{{msTime.seconds}}</span><i>{{secondsTxt}}</i></p><p v-if="!msTime.show" class="test">{{endText}}</p></div> </template>

還有一個當前時間的問題，參考這個鏈接：

https://segmentfault.com/a/1190000016794694

配置完成之后遇到第一個問題是，我的希望當然是每次點擊下一題這個組件都可以刷新。因為前面說了此時路由沒變，不能依靠監(jiān)聽路由改變來實現(xiàn)。
這里我誤入過歧途，試圖用v-if來完成重建和銷毀，但是這樣太麻煩狀態(tài)太多了！！
想實現(xiàn)組件的刷新只需要一個:key=屬性就可以！！我這里下一題改變的是 itemNum （第幾題），只需要:key="itemNum"就能夠完成組件的刷新！！！ （代碼在下面）
此時實現(xiàn)的功能是答題頁面可以倒計時10s，倒計時結(jié)束后出現(xiàn)提示文字。

下一步是實現(xiàn)10s自動選擇跳轉(zhuǎn)到下一頁。 這個其實可以通過監(jiān)聽計時器的組件，每當計時器的組件created之后，朝主組件發(fā)送信號。 created:function (){this.$emit("c_mounted");},

主組件先接受信號，再觸發(fā)methods：

<count-down:key="itemNum"@c_mounted="listenTocountdown":currentTime="1538983555":startTime="1538983555":endTime="1538983565":tipTextEnd="'距離結(jié)束還有'":secondsTxt="'秒'"class="cutdown"></count-down>

當然如果是第三方組件，無法直接修改的時候不適合這樣子。可以用@hook=""方法來實現(xiàn)監(jiān)聽子組件的生命周期的鉤子。

但是這里遇到過這個問題，[Vue warn]: Error in mounted hook: "TypeError: this.startTime is undefined"以及TypeError: “this.startTime is undefined”，并且會莫名其妙多出已結(jié)束三個字，這三個字是vue2-countdown默認的結(jié)束提醒。無論是是否用hook或者改動vue2-countdown的startTime都不行！

這是一個非常低級的錯誤，產(chǎn)生于額外使用了一個cutdown組件！！在這個cutdown組件里面自然沒有starttime！
接下來就是設置再這個組件下面，做一個簡單的計時，每隔十秒鐘自動跳轉(zhuǎn)到下一題。這里的跳轉(zhuǎn)下一題可以使用之前的方法，唯一的問題就是這個setTimeout。一個關(guān)于settimeout的this的誤區(qū)：setTimeout函數(shù)調(diào)用的代碼運行在與所在函數(shù)完全分離的執(zhí)行環(huán)境上，這會使得this指向的是window對象。

//監(jiān)聽倒計時組件timeOut(){this.addNum(-1);if (this.itemNum==5){this.$router.push('/result');}},listenTocountdown(){setTimeout(() => {this.timeOut();}, 10000);},

因此我使用了箭頭函數(shù)，此時函數(shù)的this指向的是定義它的時候的對象，也就是this指向了vue的對象。

總結(jié)

以上是生活随笔為你收集整理的vue2答题app实现倒计时切换题目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。