場景：

一個群發訊息列表（陣列）

列表下有多條訊息（元素）

每條正在傳送的訊息資料狀態需要實時重新整理，傳送完成時需要顯示成功提示符合且不需要重新整理，然後3秒消失。首次顯示列表時，已經成功的狀態不顯示這個成功提示符。

1、定位確定採用區域性重新整理

2、進入訊息列表請求獲取列表資料的介面，完成傳送的訊息不需顯示完成狀態

3、正在傳送的訊息首次渲染時就呼叫setTimeout輪詢重新整理當前訊息的介面，完成時，顯示完成狀態（新增一個完成狀態的欄位）

4、頁面銷燬時，還在傳送的訊息也取消重新整理

誤區：

   1、每條訊息沒有抽成一個單獨的元件，想要首次渲染元件呼叫重新整理介面時，只能通過定義全域性map變數來對映每條訊息的重新整理介面的定時器，明顯增加業務開發的複雜度，增加了一些不確定性的bug風險。

      每條訊息抽成元件之後，就可以在元件中的mounted中去呼叫重新整理的介面，頁面銷燬時取消重新整理可以在destroyed裡面去銷燬。

  2、這裡的一個誤區是在destroyed裡面去清除定時器的id，導致呼叫了destroyed鉤子重新整理的定時器還是無法清除。將定時器id當做一個屬性值存在了每條資料所屬的物件中，然後在子元件（每條訊息所屬的）中的destroyed中去讀取該物件的當前的定時器屬性，因為讀出來是undifined，其實並沒有拿到當前訊息正在執行的定時器，所以清除不掉。

       元件使用有誤，每一個元件都是一個獨立的元素，其中定義的變數也是私有的，定時器id定在當前元件的data中就可以了，不需要再在陣列中的每一條訊息中定一個專屬的定時器id。

抽象出來的簡單版重新整理資料，5秒後取消重新整理。

let intervalId = null
function init() {
    this.refresh()
}

function refresh() {
   intervalId = setTimeout(() => {
         this.getRefreshData()
     }, 2000);
}

function getRefreshData() {
    console.log('start get data.....', intervalId)
    setTimeout(() 
 
=> {
        console.log('get data.....')
        this.refresh()
    }, 100);
  
}

function stopRefresh() {
    console.log('stop....', intervalId)
    clearInterval(intervalId)
}

this.init()
setTimeout(() => {
    this.stopRefresh()
}, 5000);