vue监听时间变化,vue记录页面停留时间

　　本文主要介绍vue页面如何监控用户预览时间。首先，我们需要使用Vue页面的生命周期函数mounted和destroyed来分别添加启动计时和清除计时的逻辑，并通过相关操作来实现这个功能。有需要的朋友可以参考以下。

　　最近的业务涉及到这样一个需求，在线训练系统需要知道用户已经跟踪了某个在线预览页面的预览多长时间。最初我们首先想到的是利用Vue页面挂载和销毁的生命周期函数，分别添加启动计时和清除计时的逻辑，通过后台接口上报相应培训资料的时间数据，从而达到目的。

　　有了想法，我们就可以开始规划具体的代码了。

定义开始结束计时函数

　　在数据中定义定时器。我们通过变量定义计时器，这样就可以通过this.timer在任何地方访问它，这样当页面被销毁时就可以清除它。

　　Duration是持续时间的计数变量，初始化为0，可以根据定时器的秒时间间隔参数决定单位是秒还是毫秒。

　　导出默认值{

　　data() {

　　返回{

　　计时器：空，

　　持续时间：0

　　}

　　},

　　方法：{

　　startTimer() {

　　this.timer=setInterval(()={

　　Console.log(查看持续时间：，this.duration)

　　这.持续时间

　　}, 1000)

　　},

　　停止计时器(){

　　clearInterval(this.timer)

　　this . updateviewshistory()//报表数据接口

　　},

　　updateViewHistory() {

　　//报表接口逻辑代码

　　.

　　}

　　}

　　}

　　在startTimer函数中，我们打印出duration变量来验证显示的时间是否正确。

如何以及在哪调用

　　定义了开始和结束方法之后，我们必须开始考虑在哪里调用它们。因为预览页面的内容不是唯一的，所以根据素材的id进行渲染以获得细节。如果我们在mounted的生命周期中编写startTimer，那么当我们访问不同id的页面时，就不能正常切换我们想要的逻辑。

　　所以我选择在route中监控id参数来实现预览不同页面时切换开始和结束的逻辑。

　　观察：{

　　$route: {

　　即时：真的，

　　处理者(收件人、发件人){

　　if(to . params . id)this . training id=to . params . id

　　this.startTimer()

　　}

　　}

　　}

　　调用方法开始计时，最后我们可以在控制台的日志中看到当前持续时间的输出。

　　然后，作为最后一步，我们需要调用stopTimer函数来清除计时器，并在页面被破坏时报告数据。

　　由于我们的预览页面是一个通过window.open打开的独立选项卡，所以通过destroyed lifecycle函数对其进行监控。如果跳转是通过路由方法完成的，那么我们在离开页面的时候就需要销毁它，然后通过销毁就可以收听了。

　　已安装(){

　　window . addevent listener( before unload ，e=this.beforeunloadHandler(e))

　　},

　　销毁(){

　　window . remove event listener( before unload ，e=this.beforeunloadHandler(e))

　　}

　　stopTimer方法通过window的listener方法间接调用。

　　方法：{

　　beforeunloadHandler (e) {

　　this.stopTimer()

　　}

　　}

　　这里有人会问为什么在destroyed中不直接调用stopTimer方法，这样可以把唯一的逻辑分离出来，不与destroyed中的其他逻辑混在一起。提高代码的可读性和可维护性。

　　写代码的时候，不仅要实现功能，还要多思考一点，这就是普通和高手的区别。

　　关于Vue页面监控用户预览时间的文章到此结束。更多关于Vue监测用户预览时间的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。