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);