vue组件定时刷新

太过爱你忘了你带给我的痛 2022-02-20 01:55 484阅读 0赞

遇到问题：需要定时刷新获取新的数据进行展示  
解决方法：`setInterval()`定时刷新  
备注：在vue项目中，我们该将刷新放在生命周期的`mounted`阶段。  
代码：

//定时刷新
            mounted() {
                if(this.timer){
                    clearInterval(this.timer)
                }else{
                    this.timer=setInterval(()=>{
                        //获取数据
                        this.loadData()
                    },6000)
                }
            },
            //组件销毁时清除
            destroyed(){
                clearInterval(this.timer)
            },

首先看一下生命周期：  
看一段代码：（可粘贴复制直接运行）

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
    </head>
    <body>
    
    <div id="app">
        <p>{
       { message }}</p>
    </div>
    
    <script type="text/javascript">
    
        new Vue({
            el: '#app',
            data: {
                message: "weiqiujuan"
            },
            beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
                console.log("%c%s", "color:red", "message: " + this.message)
            },
            created: function () {
                console.group('created 创建完毕状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
            },
            beforeMount: function () {
                console.group('beforeMount 挂载前状态===============》');
                console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
            },
            mounted: function () {
                console.group('mounted 挂载结束状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
            },
            beforeUpdate: function () {
                console.group('beforeUpdate 更新前状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            updated: function () {
                console.group('updated 更新完成状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 销毁前状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            destroyed: function () {
                console.group('destroyed 销毁完成状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message)
            }
        })
    </script>
    </body>
    </html>

结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDgzMDA0_size_16_color_FFFFFF_t_70]  
是不是很清楚呀！

所以，我们的`setInterval`是放在`mounted`上的。  
注： 使用`setInterval`时this指向的问题，如果我们直接使用`this.timer=setInterval(function(){//要触发的函数})`报错的，因为this指向的是window，但是我们要触发的函数是挂载在vm实例上的，所以需要使用箭头函数。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDgzMDA0_size_16_color_FFFFFF_t_70]: /images/20220220/cc9a261d6dc2433cadc7512bc3a1c1b7.png