vue中给列表的每一项设置定时器(倒计时)

目前做的项目相当于一个接任务平台,对时效性要求较高,我刚好负责任务模块,最近基本都在跟任务列表打交道,有一个需求,需要对列表中的每一项任务进行倒计时,刚开始想到的就是为每个任务都添加一个定时器来控制它的时间,

但作完之后发现这简直是傻逼才会干的事儿,在一个页面上添加n个定时器,这么多定时器难以维护,而且这些定时器什么时候销毁也成了问题,况且这个项目中有任务列表的明显不止一页,每一页也不确定有多少数据,凡是跟任务挂钩的都需要定时器,如果按刚开始的思路来,后期我可能会疯掉,我不敢这么玩儿。。。于是开始想办法统一来管理定时器,我发现并不需要为每一项都添加定时器,我只需要在列表数据初始化的时候收集每一项的截止时间减去当前时间,得到每一项数据需要到倒计时的时间,把这些时间放在一个时间数组中,然后给这个页面添加一个定时器,每秒钟为这个时间数组中的每一个时间减一秒,这个时间数组在vue的data中返回,所以每次时间数组发生变化也会反映到页面上去,在跳转到其他页面的时候再销毁本页面的定时器,这是当前的一个思路,代码就不粘了,感觉思路最重要。