最近的業務中涉及到這樣一個需求，在線培訓的系統需要知道用戶對某個在線預覽的頁面追蹤用戶的預覽時長。初步我們首先想到借助 Vue 頁面的生命周期函數?mounted?和?destroyed，分別在其中加入開始計時和清除計時的邏輯，通過后臺的接口上報對應的培訓素材的時間數據，即可達到目的。

有了思路，我們就可以開始籌劃具體的代碼實現。

定義開始結束計時函數

在?data?中定義我們通過變量定義計時器，這樣可以通過?this.timer?隨處可訪問，便于后面銷毀頁面的時候清除它。

duration?為時長的計數變量，初始化為 0，可根據計時器的第二個時間間隔參數，決定單位是秒還是毫秒。

export?default?{data()?{return?{timer:?null,duration:?0}},methods:?{startTimer()?{this.timer?=?setInterval(()?=>?{console.log('觀看時長:?',?this.duration)this.duration++},?1000)},stopTimer()?{clearInterval(this.timer)this.updateViewHistory()?//?上報數據接口},updateViewHistory()?{//?上報接口邏輯代碼....}} }

在?startTimer?函數中我們順便打印出?duration?變量來驗證顯示的時間是否正確。

如何以及在哪調用

定義好了開始結束的方法，我們就要開始想在哪調用它們。因為預覽的頁面內容不是唯一的，是根據素材的?id?來獲取詳情進行渲染的。如果我們把?startTimer?寫在?mounted?生命周期里，那么當我們訪問不同?id?的頁面的時候，無法正常切換我們想要的邏輯。

所以我選擇了通過監聽路由中的?id?參數，來達到在預覽不同頁面時候來切換開始和結束的邏輯

watch:?{$route:?{immediate:?true,handler(to,?from)?{if?(to.params.id)?this.trainingId?=?to.params.idthis.startTimer()}}}

調用了開始計時的方法，終于我們可以在?console?的?log?中可以看到輸出了當前的時長

然后也是最后一步，我們需要在頁面銷毀的時候調用?stopTimer?函數來清除定時器，上報數據。

由于我們的預覽頁面是通過?window.open?打開的獨立的標簽頁，所以這里是通過?destroyed?生命周期函數監聽。如果是通過路由方法進行的跳轉，那么我們需要在離開頁面的時候進行銷毀，方可再通過?destroyed?監聽到。

??mounted()?{window.addEventListener('beforeunload',?e?=>?this.beforeunloadHandler(e))},destroyed()?{window.removeEventListener('beforeunload',?e?=>?this.beforeunloadHandler(e))}

通過?window?的監聽器方法來來間接調用?stopTimer?方法

methods:?{beforeunloadHandler?(e)?{this.stopTimer()} }

這里有人會問為什么不直接在?destroyed?中調用?stopTimer?方法，這樣可以分離出特有的邏輯，不與?destroyed?中其它的邏輯混在一起。提高代碼的可讀性和維護性。

在寫代碼的時候我們不僅要實現功能，還要想的更多一點，這就是普通和高手的區別。

- END -

總結

以上是生活随笔為你收集整理的Vue 页面如何利用生命周期函数监听用户预览时长的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。