場景：

一個群發消息列表（數組）

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

每條正在發送的消息數據狀態需要實時刷新，發送完成時需要顯示成功提示符合且不需要刷新，然後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);

problem：vue組件局部刷新，在組件銷毀（destroyed）時取消刷新無效問題