Vue定时刷新页面数据

骑猪看日落 2021-09-24 01:54 865阅读 0赞

*我现在只知道两种最常见的定时刷新方案，一种是利用Vue的内置函数setTimeout、setInterval定时执行，另一种是websocket消息推送。我的需求是，当数据库中的数据发生更新时，前端就要检测并展示出这些数据。这个正确的实现是利用websocket，但是我对websocket没有什么了解，所以这一篇文章先利用vue的内置函数做一个充当，后续发布websocket在vue中的详细使用。在此有点时间记录一下、当做笔记，同时也是为了帮助到同行业的广大开发者。*  
**最终实现见图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjUxMDMy_size_16_color_FFFFFF_t_70_pic_center]  
要更新的数据为图上的红框中。  
下面开始代码实现(这是我现写的模板，不是图中全部的代码)：  
**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()的定时执行模板就形成了，是很容易运用的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjUxMDMy_size_16_color_FFFFFF_t_70_pic_center]: /images/20210923/b1f5339e2e894d88b272aa7f749ff535.png