problem：vue组件局部刷新，在组件销毁（destroyed）时取消刷新无效问题

Posted 2021-01-29 yy95

场景：

一个群发消息列表（数组）

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

每条正在发送的消息数据状态需要实时刷新，发送完成时需要显示成功提示符合且不需要刷新，然后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);