VUE简单的定时器实时刷新

说明：我只是一个刚入门的小前端，大家能够指导我，但千万不要喷我，虽然我知道我很垃圾！人吗，都是要成长的！大佬，请多多指教！！！

我前段时间刚刚写了一个相似余股票的项目，上边的K线图是要实时去刷新的，因此要用vue作一个心跳，固然你们也能够选择用websocket，大佬们感受确定很简单，可是我只是一个刚入门的小前端，特此记录一下。

思路

其实思路很简单，首先要了解vue的生命周期和vue的内置函数，其思路就是先定义一个定时器，而后去定时请求后台，到最后关闭这个定时器，哈哈，是否是都是废话，可是确实如此，大家能够先去尝试一下。

这个小功能实现的自我总结

一开始我感受很简单，不就是个心跳吗，在methods 中定义一个timer函数返回一个setInterval和一个getData函数，在timer中调用getData， 而后在created中去调用，其中就会有一个问题，就是刚进来页面不会有数据，为何想必你们确定会知道，就是这是调用了一个定时器只有时间到了之后才会去请求后台，这个不是很好解决吗，在created 中在调用一次getData不就行了吗，嗯，我就这样作了，虽然我感受不是很合理，啊啊啊啊，好烦，第一次写不知道如何写，仍是用代码来表达，这样比较清楚........

初版，这样很不合理，由于这样会加载页面发送两次数据，并且还有一个很大的雷，就是setInterval在网页卸载是不会关掉，并且你再次进入这个页面时，定时器会加速，这个BUG应该是由于vue切换页面不会刷新的缘由吧，请大佬指教。

<script>
    export default {
        created() {
            this.timer()
            this.getData()
        }
        methods: {
            // 这是一个获取数据
            getData() {
                .....
            }
            // 这是一个定时器
            timer() {
                return setInterval(()=>{
                    this.getData()
                },5000)
            }
        },
        destroyed() {
			clearInterval(this.timer)
        }
    }
</script>
复制代码

第二版，我进行了改进，我把setInterval换成了setTimeout，由于setTimeout只执行一次，因此要靠函数去驱动它，而后我用到了updated，它也有一个弊端，就是有某一个数据更新，它就会触发，因此有时会执行屡次。

<script>
    export default {
        created() {
            this.getData()
        }
        methods: {
            // 这是获取数据的函数
            getData() {
                .....
            }
            // 这是一个定时器
            timer() {
                return setTimeout(()=>{
                    this.getData()
                },5000)
            }
        },
        updated() {
          this.timer()  
        }
        destroyed() {
			clearTimeout(this.timer)
        }
    }
</script>
复制代码

最终版

监听list只要它变化就去触发定时器，这样就解决了updated的屡次触发。

<script>
    export default {
        data() {
            return {
                list: []			// 获取的数据列表
            }
        }
        created() {
            this.getData()
        }
        methods: {
            // 这是获取数据的函数
            getData() {
                .....
            }
            // 这是一个定时器
            timer() {
                return setTimeout(()=>{
                    this.getData()
                },5000)
            }
        },
        watch: {
            list() {
          		this.timer()  
            }
        }
        destroyed() {
			clearTimeout(this.timer)
        }
    }
</script>
复制代码

总结

主要就是要了解vue的钩子函数。可能漏洞不少，但愿大佬多多指教，还有就是第一次写，有点词穷，请你们多多担待。

笑看人生