博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
解决vue页面的定时刷新问题
阅读量:4102 次
发布时间:2019-05-25

本文共 405 字,大约阅读时间需要 1 分钟。

背景描述:

我使用的是vue+element 开发系统,在页面上有一个系统消息,这个消息的数量随时可能发生变化的,比如我已经看了某一条,那这个未读消息数量就应该减少。
在这里插入图片描述
于是,这个时候我们就要使用setInterval()了。那么我们应该把定时刷新放在什么位置什么时候触发什么时候清除呢?这就需要我们了解vue的生命周期。
在这里插入图片描述
贴下我的代码供参考:
在这里插入图片描述
另外,我在查阅资料时看到有这样情况的,我也展示出来大家可以注意下。

注意:使用setInterval时this指向的问题。如果我们直接用this.timer = setInterval(function(){要触发的函数}) 是会报错的。因为这样的话this的指向为window,但是我们要触发的函数是挂载在vm实例上面的。所以这个时候就是箭头函数发挥用处的时候了。我们可以直接这样写this.timer = setInterval(() => {要触发的函数}).

转载地址:http://xgzsi.baihongyu.com/

你可能感兴趣的文章
精通Spring源码 | BeanFactoryPostProcessor
查看>>
精通 Spring 源码 | InstantiationAwareBeanPostProcessor(2)
查看>>
精通 Spring 源码 | InstantiationAwareBeanPostProcessor(1)
查看>>
面试必问的设计模式 | 装饰者模式
查看>>
精通 Spring 源码 | ImportSelector
查看>>
精通 Spring 源码 | BeanFactory & FactoryBean
查看>>
SpringBoot 2.x | Spring Boot Admin 微服务监控
查看>>
创建定时任务的 5 种方式
查看>>
全站导航 | 文章汇总
查看>>
创建多线程的 5 种方式
查看>>
精通 Spring 源码 | Spring 中的各种 Aware
查看>>
消息队列 RocketMQ | Docker 快速安装 RocketMQ
查看>>
SpringBoot 2.x | SpringBoot 整合 RocketMQ
查看>>
Docker $ 界面管理 :Docker Web
查看>>
MongoDB的安装及使用
查看>>
IDEA运行JavaWeb服务器图片无法加载
查看>>
Redis | Redis 单机版安装与使用(Window)
查看>>
IDEA 搭建 maven 环境
查看>>
SpringMVC(四):接收参数的方式
查看>>
IDEA导入Eclipse项目静态资源无法加载等问题
查看>>