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

場景：

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

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

每條正在發送的消息數據狀態須要實時刷新，發送完成時須要顯示成功提示符合且不須要刷新，而後3秒消失。首次顯示列表時，已經成功的狀態不顯示這個成功提示符。

 

一、定位肯定採用局部刷新

二、進入消息列表請求獲取列表數據的接口，完成發送的消息不需顯示完成狀態

三、正在發送的消息首次渲染時就調用setTimeout輪詢刷新當前消息的接口，完成時，顯示完成狀態（新增一個完成狀態的字段）

四、頁面銷燬時，還在發送的消息也取消刷新

 

誤區：

   一、每條消息沒有抽成一個單獨的組件，想要首次渲染組件調用刷新接口時，只能經過定義全局map變量來映射每條消息的刷新接口的定時器，明顯增長業務開發的複雜度，增長了一些不肯定性的bug風險。

      每條消息抽成組件以後，就能夠在組件中的mounted中去調用刷新的接口，頁面銷燬時取消刷新能夠在destroyed裏面去銷燬。

  二、這裏的一個誤區是在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);