这篇文章主要介绍“Vue页面监听用户预览时间功能如何实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue页面监听用户预览时间功能如何实现”文章能帮助大家解决问题。
我们提供的服务有：做网站、成都网站制作、微信公众号开发、网站优化、网站认证、裕华ssl等。为成百上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的裕华网站制作公司
首先想到借助 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.id
this.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 中其它的逻辑混在一起。提高代码的可读性和维护性。
关于“Vue页面监听用户预览时间功能如何实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。
