如圖，有這麼個需求，測試人員在測試過程中提了一個bug，手機鎖屏再喚醒倒計時時間沒有更新，仍從鎖屏的時間繼續，於是開始尋找解決之法

經瞭解得知，鎖屏時候，瀏覽器的一切活動會停止執行，那麼js也無法倖免，這時候就想到有沒有能監聽瀏覽器活動停止的方法呢？一查，果然有

具體可參看https://www.css88.com/archives/6103，

重要的就是給window加一個visibilitychange監聽，在裡面判斷document.tVisibilityState的值，如果為hidden，則是頁面內容不可見時的鉤子，如果不是hidden，則就是可見時的鉤子，即喚醒頁面或切換應用回到頁面的回撥。

vue裡面使用方法可以參考以下程式碼

data:() =>{
　　return {
　　　　times:'',
　　　　closeTime:''
　　}
}
mounted() {
    window.addEventListener('visibilitychange',this.diffTime)
  },
  beforeDestroy(){
    window.removeEventListener('visibilitychange', this.diffTime)
  },
  methods: {
    // 處理鎖屏時間差
    diffTime() {
      
 
if (document.tVisibilityState =='hidden') {
       this.closeTime = Date.now()
      } else {
        this.times = this.times - (Date.now() - this.closeTime)/1000;
      }
    },
 }

經實驗，加上這段程式碼後確實倒計時更新了，但是時間顯示會快2到3秒，不得其解，感覺應該是取值的時候比螢幕喚醒慢了，比如我鎖屏5秒，但是在喚醒時倒計時少了7秒。

也想到了一種辦法，就是喚醒時候重新拉取服務端的時間，然後更新虛擬dom，在實際操作中，由於是非同步獲取，會看到倒計時數字那裡有明顯的閃一下更新，不利於使用者體驗。

所以最終還是採用了visibilitychange事件來處理，畢竟使用者在這個頁面不會停留太久，不過這並沒有完美的解決問題，如果你有更好的方法，希望能告訴我。