最近的業(yè)務中涉及到這樣一個需求，在線培訓的系統(tǒng)需要知道用戶對某個在線預覽的頁面追蹤用戶的預覽時長。初步我們首先想到借助 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 的頁面的時候，無法正常切換我們想要的邏輯。

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

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

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

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

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

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

通過 window 的監(jiān)聽器方法來來間接調用 stopTimer 方法

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

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

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

到此這篇關于Vue 頁面監(jiān)聽用戶預覽時間的文章就介紹到這了,更多相關Vue 監(jiān)聽用戶預覽時間內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網！