Vue 中如何定时展示一个动态的数据？

Question

后端 websocket 向前端不定时的推数据（每次一条）。
前端拿到数据要求每一条展示 5s。
请问下在 Vue 中大概是个什么样的实现思路。

function handleReceiveMessage(e) {
  let data = JSON.parse(e.data);

  setTimeout(() => {
    // xxxxxx
  }, timer.value);

  timer.value += 5000;
}

如上有两个问题：

1. 什么时机把 timer 重置为 0。
2. 最后一次如何控制只展示 5s。

Answer 1

1. Vue 是 MVVP 框架，MVVM 的核心是：开发者负责编写数据到视图的映射，然后只维护数据

2. 所以具体到你的需求，就是：

   3. 先完成消息数据到显示推送视图的映射
   4. 然后将 ws 得到的数据放进数组，vue 就会完成渲染
   5. 然后适当处理动画效果

Answer 2

data(){
        message: 'hello'
      }

//let newMessage = websock的数据

setTimeout(() => {
    this.message = newMessage
}, 5000);

Answer 3

 // 获取数据的函数
    getData() {
        .....
    }
    // 定时器
    time() {
        return setTimeout(()=>{
            this.getData()
        },5000)
    }
    watch: {
      list() {
          this.time()  
          }
      }
  destroyed() {
      clearTimeout(this.time)
  }

监听list只要它变化就去触发定时器