Vue定时刷新页面数据

我现在只知道两种最常见的定时刷新方案，一种是利用Vue的内置函数setTimeout、setInterval定时执行，另一种是websocket消息推送。我的需求是，当数据库中的数据发生更新时，前端就要检测并展示出这些数据。这个正确的实现是利用websocket，但是我对websocket没有什么了解，所以这一篇文章先利用vue的内置函数做一个充当，后续发布websocket在vue中的详细使用。在此有点时间记录一下、当做笔记，同时也是为了帮助到同行业的广大开发者。
最终实现见图

要更新的数据为图上的红框中。
下面开始代码实现(这是我现写的模板，不是图中全部的代码)：
1.基础模板

<template><div>//利用v-model等实现数据绑定</div>
</template><script>export default {data(){return{dbList: [],        //用于接收findDB方法中的数据}}，methods:{findDB(){      //这个方法是你要获取后台数据的方法//这里面通过你的axiosUrl获取到一些数据,}},mounted(){        //模板渲染之后调用的，模板渲染之前是created//刚进页面就能获取到findDB()中的数据//this.findDB()}}
</script><style lang="scss" scoped></style>

2.setInterval()与setTimeout的区别
书写格式：

xxx(){       //定义一个方法函数
return setTimeout(()=>{         //setInterval换个名字就行了//要执行的方法句式：this.findDB()},60000)     //设置时间，这里是1分钟}

最关键：setInterval()成立后会一直执行，setTimeout(),如果没有条件触发，它就只执行一次
3.setInterval()问题没有解决

<template><div>//利用v-model等实现数据绑定</div>
</template><script>export default {data(){return{dbList: [],        //用于接收findDB方法中的数据}}，methods:{findDB(){      //这个方法是你要获取后台数据的方法//这里面通过你的axiosUrl获取到一些数据,}，times(){            //定义了一个times()方法来执行定时查询findDB()return setInterval(()=>{         //setInterval换个名字就行了this.findDB()},60000)       //设置时间，这里是1分钟}},destroyed() {clearInterval(this.times)       //退出页面后销毁定时方法},mounted(){       //模板渲染之后调用的，模板渲染之前是created//刚进页面就能获取到findDB()中的数据this.findDB()this.times()   //加载定时任务}}
</script><style lang="scss" scoped></style>

这个定时执行是执行了，销毁方法也调用了，但是退出当前页面后加载的定时任务并没有退出，它还在不断执行，而且在页面在重新进入一次，times()方法又被执行一次，导致了执行查询的速度变快，所以我没做深研究，在这里希望遇到这种情况的开发者注意一下。
4.采用setTimeout实现
上面说过setTimeout只执行一次，想要它不断执行，需要用到触发事件，这个触发的事件不可能是人为触发的，所以我们采用监听方式，思路就是当检测到xx里的值变动时，就触发这个定时事件，对基础模板做出如下调整：

<template><div>//利用v-model等实现数据绑定</div>
</template><script>export default {data(){return{dbList: [],        //用于接收findDB方法中的数据today: ' '      //定义一个当前时间，数据从findDB()中获取，被watch监听}}，watch:{   //监听，监听什么？我们在data中定义一个变量，就监听这个变量today(){       //被监听的变量，也可以是对象集合等//当today中的值变化时，我们就触发定时事件this.times()}},methods:{findDB(){       //这个方法是你要获取后台数据的方法//这里面通过你的axiosUrl获取到一些数据,//怎样为today定义一个变量，那就当前时间，或随机数吧this.today = new Date()},//setTimeout()定时事件times(){return setTimeout(()=>{this.findDB()},5000)}},mounted(){      //模板渲染之后调用的，模板渲染之前是created//刚进页面就能获取到findDB()中的数据this.findDB()},destroyed(){ //销毁是不能忘记的clearTimeout(this.times)}}
</script><style lang="scss" scoped></style>

这样基于setTimeout()的定时执行模板就形成了，是很容易运用的。

Vue定时刷新页面数据相关推荐

Android 设置定时刷新页面数据，最小自动刷新时间
设置初始时间 SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式 String t ...
Response_输出数据，实现文件下载，定时刷新页面，是否缓存，重定向，实现验证码...
1.Response_输出数据 1.Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象. ServletRespon ...
vue 定时刷新按钮控制
vue 定时刷新按钮控制直接上干货公共组件 <template><el-switchref="switchObj"v-bind="$attrs&qu ...
用ajax技术实现无闪烁定时刷新页面
在Web开发中我们经常需要实现定时刷新某个页面:1.来保持session的值或者检查session的值是否为空(比如说防止同一用户重复登录):2.实现实时站内短信:3.定时更新页面数据等等.但是我们在 ...
无闪烁刷新页面 php,AJAX_Ajax实现无闪烁定时刷新页面实例代码，在Web开发中我们经常需要实现 - phpStudy...
Ajax实现无闪烁定时刷新页面实例代码在Web开发中我们经常需要实现定时刷新某个页面: 1.来保持session的值或者检查session的值是否为空(比如说防止同一用户重复登录): 2.实现实时站 ...
关于IOS系统,H5页面操作history.go(n)回退页面时不会刷新页面数据的问题
关于IOS系统 H5页面操作history.go(n)回退页面时不会刷新页面数据的问题在我们从操作h5页面时,离开当前页面后,在使用返回键或者history.go(n)再次回到页面,有时是需要刷新当 ...
JSP简单练习-定时刷新页面
<%@ page contentType="text/html; charset=gb2312" %> <%@ page import="java.ut ...
用Ajax+js+jQuery实现无闪烁定时刷新页面定时刷新
本人想在一个JSP页面上显示一个消息模块,这个消息需要定时更新,请问大家如何用Ajax+js+jQuery实现无闪烁定时刷新页面功能.本人使用的js框架是jQuery. 先说思路,那就是在前端用 js ...
微信小程序通过wx.redirectTo,实现单页面刷新效果＆下拉刷新页面数据效果
微信小程序通过wx.redirectTo,实现单页面刷新效果 & 下拉刷新页面数据效果一: 使用 wx.redirectTo(),实现页面刷新数据效果 API说明: 关闭当前页面,跳转到应 ...

Vue定时刷新页面数据

Vue定时刷新页面数据相关推荐

最新文章

热门文章