vue组件定时刷新

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

Saucey_6

3807人浏览 · 2019-04-12 11:42:16

Saucey_6 · 2019-04-12 11:42:16 发布

遇到问题：需要定时刷新获取新的数据进行展示
解决方法：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>

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^