VUE实践优化：轮询机制与代码结构升级

前言

        我们之前探讨过，对于包含处理状态的表格数据，我们可以通过轮询的方式进行处理（轮询更新进度条：JavaScript中的定时器和异步编程技巧）。然而，当我们离开页面时，定时器仍会继续触发请求，这会造成资源的浪费，因为返回的数据并没有被渲染出来。

        为了解决这个问题，我们需要实现以下要求：

1. 最多只能同时存在一个轮询的定时器。
2. 当用户离开页面时，定时器应被关闭。
3. 当用户重新进入页面时，如果仍有数据正在处理中，应重新启动轮询。
4. 轮询应能跨页面、跨显示数量。

---

实现

为了实现上述要求，我们可以采取以下步骤：

1. 在全局范围内定义一个唯一的定时器变量，例如 running_task_timer。
2. 在开始轮询之前，检查 running_task_timer是否已存在。如果存在，则清除该定时器并停止轮询。
3. 如果需要启动轮询，首先检查页面是否处于激活状态。如果不在激活状态，则不启动轮询。
4. 启动轮询时，设置 running_task_timer 为定时器的ID，并开始轮询处理。
5. 当用户离开页面时，清除 running_task_timer 并停止轮询。
6. 当用户重新进入页面时，检查是否有正在处理的数据。如果有，则重新设置running_task_timer 并启动轮询。
7. 在轮询处理中，检查页面是否处于激活状态。如果不在激活状态，则暂停轮询处理。
8. 在轮询处理完成时，检查是否有新的数据需要处理。如果有，则重新设置running_task_timer 并启动轮询。
9. 通过上述步骤，我们可以确保同时只有一个轮询的定时器存在，并在用户离开页面时关闭定时器。当用户重新进入页面时，如果仍有数据正在处理中，可以重新启动轮询。同时，轮询的处理可以跨页面、跨显示数量进行。

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="id" label="任务ID" />
      <