vue.js 使用计时器自动重新加载/刷新数据

Posted 2023-02-22

【中文标题】vue.js 使用计时器自动重新加载/刷新数据

【英文标题】：vue.js auto reload / refresh data with timer

【发布时间】：2016-08-03 00:32:42

【问题描述】：

（Vue.js 新手）我从 get 请求中获取数据以显示日历信息。我希望它每 5 分钟更新一次。

文档中没有关于自动重新加载的内容 - 我将如何实现这一点？我是在文件中使用标准 javascript 还是其他什么？

下面是我完整的 app.js：

Vue.component('events', 
    template: '#events-template',

    data: function() 
        return 
            list: []
        
    ,

    created: function() 

        this.fetchEventsList();
    ,

    methods: 

        fetchEventsList: function() 

            this.$http.get('events', function(events) 

                this.list = events;

            ).bind(this);

        

    

);

new Vue(
    el: 'body',


);

【参考方案1】：

无需重新发明***，window.setInterval() 做得很好

Vue.component('events', 
    template: '#events-template',

    data () 
        return 
            list: [],
            timer: ''
        
    ,
    created () 
        this.fetchEventsList();
        this.timer = setInterval(this.fetchEventsList, 300000);
    ,
    methods: 
        fetchEventsList () 
            this.$http.get('events', (events) => 
                this.list = events;
            ).bind(this);
        ,
        cancelAutoUpdate () 
            clearInterval(this.timer);
        
    ,
    beforeDestroy () 
      this.cancelAutoUpdate();
    
);

new Vue(
    el: 'body',
);

【讨论】：

建议：当组件为destroyed()时运行cancelAutoUpdate()