vue页面的定时刷新

在做项目时我们肯定会遇到要求该页面几分钟去定时刷新一下获取最新数据这样的情况，那么这个时候我们就要使用setInterval()了。那么我们应该把定时刷新放在什么位置什么时候触发什么时候清除呢？这就需要我们了解vue的生命周期。首先贴一张从官网截下来的图吧。

在该图上我已经标注了触发和清除的时期，那么我们在使用中还有几个需要注意的点。

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

贴一下我写的吧

我是在destroyed的时候清除页面刷新的。

这里的getMigrateDetail（）是我自己定义的一个函数，大家在实现的时候只需要把它替换成自己的函数就ok了。

vue页面的定时刷新相关推荐

vue页面重置和刷新（vue数据重置）
一.this.reload()方法(体验度好,无空白页面,相当于页面数据重置) 1.在app.vue文件中配置: <template><!-- 给全局挂载适配元素 app --&g ...
vue项目实现定时刷新和关闭刷新功能
<div class="refleshBtn"><el-button type="primary" plain size="mini ...
Response_输出数据，实现文件下载，定时刷新页面，是否缓存，重定向，实现验证码...
1.Response_输出数据 1.Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象. ServletRespon ...
用ajax技术实现无闪烁定时刷新页面
在Web开发中我们经常需要实现定时刷新某个页面:1.来保持session的值或者检查session的值是否为空(比如说防止同一用户重复登录):2.实现实时站内短信:3.定时更新页面数据等等.但是我们在 ...
无闪烁刷新页面 php,AJAX_Ajax实现无闪烁定时刷新页面实例代码，在Web开发中我们经常需要实现 - phpStudy...
Ajax实现无闪烁定时刷新页面实例代码在Web开发中我们经常需要实现定时刷新某个页面: 1.来保持session的值或者检查session的值是否为空(比如说防止同一用户重复登录): 2.实现实时站 ...
Vue定时刷新页面数据
我现在只知道两种最常见的定时刷新方案,一种是利用Vue的内置函数setTimeout.setInterval定时执行,另一种是websocket消息推送.我的需求是,当数据库中的数据发生更新时,前端就 ...
VUE定时器（页面定时刷新）
VUE定时器(页面定时刷新) 如果觉得页面上数据刷新缓慢,我们就可以使用vue中的定时器设置时间,五分钟.十分钟刷新一次都行. 一. //创建实例,可以取值,但是拿不到值 created(){} 二. ...
vue 定时刷新按钮控制
vue 定时刷新按钮控制直接上干货公共组件 <template><el-switchref="switchObj"v-bind="$attrs&qu ...
JSP简单练习-定时刷新页面
<%@ page contentType="text/html; charset=gb2312" %> <%@ page import="java.ut ...

vue页面的定时刷新

vue页面的定时刷新相关推荐

最新文章

热门文章