Vue页面监听用户预览时间功能怎么实现

这篇文章主要介绍"Vue页面监听用户预览时间功能怎么实现"，在日常操作中，相信很多人在Vue页面监听用户预览时间功能怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"Vue页面监听用户预览时间功能怎么实现"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

定义开始结束计时函数

在 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页面监听用户预览时间功能怎么实现"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！