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的钩子函数。可能漏洞很多，希望大佬多多指教，还有就是第一次写，有点词穷，请大家多多担待。、

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue强制刷新组件的方法示例

    前言: 在开发过程中,有时候会遇到这么一种情况,通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,这就需要我们手动进行强制刷新组件. 官网是这样说的: 可能你还不大理解,请继续往下看,下面是我的一个例子,来详细解说了这个方法的使用, 第一个打印结果 第二个打印结果 一.问题描述:父组件通过v-for渲染子组件,删除子组件数据出现异常. <code class="language-plain"><section v-if=

  • vue实现局部刷新的实现示例

    利用Vue里面的provide+inject组合(走过路过,不要错过) 使用2.2.0 新增的provide / inject控制<router-view>的显示隐藏 在App.vue中使用provide //App.vue <template> <div> <router-view v-if="isRouterAlive"></router-view> </div> </template> <s

  • vue主动刷新页面及列表数据删除后的刷新实例

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. App.vue: 声明reload方法,控制

  • vue之延时刷新实例

    当我们要做一个实时搜索时,用watch监控数据,当数据不断变化时,不可能立刻进行接口的请求,这样会给服务器带来麻烦,使服务器负载加重,此时就需要一个延时加载机制. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>xichuan</title> <link rel="stylesheet&q

  • 详解VUE的状态控制与延时加载刷新

    在实际项目中,我们经常会遇到这种状况,某些数据我们希望等到需要的时候再去获取,或者某些数据我们需要刷新,但是不必立刻刷新,而是延时到展示的时候再去刷新. 在DOM操作的年代,想要实现这样的功能可能会稍微麻烦一些,然而当我们使用数据驱动的mv*框架的时候,这个想要实现这个需求就容易了许多. 当我们理解数据驱动时,我们很容易想到将需要刷新的状态也设置成为某个数据,在需要刷新的地方watch这个数据,当刷新状态发生变动的时候,watch生效并执行刷新的方法,这就实现了延时刷新.而且我们不再需要关注延时

  • VUE简单的定时器实时刷新的实现方法

    说明:我只是一个刚入门的小前端,你们可以指导我,但千万不要喷我,虽然我知道我很垃圾!人吗,都是要成长的!大佬,请多多指教!!! 我前段时间刚刚写了一个类似余股票的项目,上边的K线图是要实时去刷新的,所以要用vue做一个心跳,当然大家也可以选择用websocket,大佬们感觉肯定很简单,但是我只是一个刚入门的小前端,特此记录一下. 思路 其实思路很简单,首先要了解vue的生命周期和vue的内置函数,其思路就是先定义一个定时器,然后去定时请求后台,到最后关闭这个定时器,哈哈,是不是都是废话,但是确实

  • vue路由history模式页面刷新404解决方法Koa Express

    目录 为什页面刷新会出现404 Node服务使用Koa框架 Node服务使用Express框架 为什页面刷新会出现404 因为vue项目中路由hash模式改为了history模式,由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器,而history模式下当刷新页面之后浏览器会直接去请求服务器,而服务器没有这个路由,于是就出现404. 那为什么页面跳转就是正常的?跳转时其实不是通过请求服务器的,而是通过js操作history的API改变地址完成的. 建议:非C端系统可以

  • vue缓存的keepalive页面刷新数据的方法

    用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认修改之后,回退到a页面,a页面需要更新这条数据 实现这个功能的时候,由于是路由页面之间的跳转,首先想到的方案有几个:1. 用sessionStorage本地存储:2. 用路由参数带过去:3. 用兄弟组件传值 由于是添加完之后如果按回退是需要退出整个页面,如果用路由跳转,会出现回退到编辑页面了,所以这

  • Vue 中获取当前时间并实时刷新的实现代码

    1. 实现代码 <template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div> </template> <script> export default { data(){ return { nowDate: "", // 当前日期 nowTime: "", // 当前时间 nowWeek: "" // 当前星期 } }, methods

  • vue+canvas实现数据实时从上到下刷新瀑布图效果(类似QT的)

    vue+canvas实现数据实时从上到下刷新瀑布图效果(类似QT的)

    话不多说了,先上一张Demo图,实现的功能有:左侧图例.右侧瀑布图.鼠标移入弹出当前坐标对应的数据信息(有优化的空间,大家自由发挥). 图例使用到的插件 这里推荐使用安装npm插件colormap 瀑布图主体内容 这里不多做解释了,都是一些原生标签还有vue绑定的事件,可以根据实际项目情况自己封装成组件,我这里是写在一起的. <template> <div> <div class="content"> <div class="neir

  • Vue+WebSocket页面实时刷新长连接的实现

    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示,记录一下过程以及碰到的问题: 注意:页面刷新长连接会被关闭,其实进入当前页面建立长连接的目的就是页面不用F5刷新,所有数据自动实时刷新,如果还是来回F5大刷页面那就没有意义了... ps: 如果实在有这个需求的话,网上貌似有实现刷新页面长连接不断的方法,请自行百度....

  • 基于Vue实现tab栏切换内容不断实时刷新数据功能

    基于Vue实现tab栏切换内容不断实时刷新数据功能

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好 也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l

  • php+ajax实时刷新简单实例

    本文实例讲述了php+ajax实时刷新简单实现方法,分享给大家供大家参考.具体如下: ajax自动刷新好像是个很常见的问题,之前做一个网页聊天室程序也是卡在了这上面,经过了这段时间的学习,终于做出了一个可以自动刷新网页的代码框架,希望正在迷茫的亲们不要像我一样走了这么多弯路 废话不多说 上代码: html部分: <html> <head> <script type="text/javascript"> function loadXMLDoc()//a

  • vue实现右上角时间显示实时刷新

    vue实现右上角时间显示实时刷新

    本文实例为大家分享了vue实现右上角时间显示实时刷新的具体代码,供大家参考,具体内容如下 效果图 utils文件夹下的index.js export default { // 获取右上角的时间戳 formatDate(time) { let newTime = ""; let date = new Date(time); let a = new Array("日","一","二","三","四&q

  • vue项目每30秒刷新1次接口的实现方法

    在vue.js项目中,经常需要对数据实时更新--每隔xx秒需要刷新一次接口--即需要用到定时器相关原理 我们先看一看2种常用定时器: setInterval(function(){}, milliseconds)--会不停的调用函数 setTimeout(function(){}, milliseconds)--只执行函数一次 乍看之下,setInterval会符合我们的业务需求,然而也需要注意一些坑,单纯的使用setInterval会导致页面卡死!其原因与JS引擎线程有关(有兴趣的童鞋可自行研

随机推荐