Vue3 使用 Web Workers 实现倒计时

在 Vue3 中使用 Web Workers 实现倒计时，可以按照以下步骤进行：

创建一个 Worker 线程的 JS 文件，例如 'countdown.worker.js'，并在其中编写倒计时的逻辑代码。在本例中，我们假设要实现一个倒计时从 10 到 1 的功能，代码如下：

let timeLeft = 10;

const countDown = () => {
  if (timeLeft > 0) {
    timeLeft--;
    postMessage(timeLeft);
    setTimeout(countDown, 1000);
  } else {
    postMessage('done');
  }
};

countDown();

在 Vue 组件中引入 'countdown.worker.js'，并创建一个 Worker 实例。在 Vue3 中，可以使用 'ref' 来创建响应式的变量，用于保存倒计时的时间。

<template>
  <div>
    <p>Time left: {{ timeLeft }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const timeLeft = ref(10);
    let worker = null;

    onMounted(() => {
      worker = new Worker('./countdown.worker.js');
      worker.onmessage = (e) => {
        if (e.data === 'done') {
          // 倒计时结束
          console.log('Countdown finished!');
        } else {
          timeLeft.value = e.data;
        }
      };
    });

    return { timeLeft };
  },
};
</script>

在 Worker 实例中，通过 'postMessage()' 方法向主线程发送倒计时的时间。在主线程中，通过监听 'onmessage' 事件来接收来自 Worker 线程的消息，并更新响应式变量的值。当倒计时结束时，在 Worker 实例中发送一个字符串 'done'，用于标记倒计时已经完成。
在组件销毁时，需要关闭 Worker 实例，避免内存泄漏。

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const timeLeft = ref(10);
    let worker = null;

    onMounted(() => {
      worker = new Worker('./countdown.worker.js');
      worker.onmessage = (e) => {
        if (e.data === 'done') {
          console.log('Countdown finished!');
        } else {
          timeLeft.value = e.data;
        }
      };
    });

    onUnmounted(() => {
      worker.terminate();
    });

    return { timeLeft };
  },
};
</script>

通过以上步骤，我们就可以在 Vue3 中使用 Web Workers 实现倒计时功能。需要注意的是，在 Worker 线程中无法直接访问 Vue 实例中的数据和方法，因此需要通过 postMessage 方法来进行通信。