Travailleur Web utilisant Vue3 + Vite + TypeScript

Les Web Workers permettent au contenu Web d'exécuter facilement des scripts dans un thread d'arrière-plan. Les threads peuvent effectuer des tâches sans interférer avec l'interface utilisateur. Par conséquent, lorsque nous avons un grand nombre de tâches de calcul, nous pouvons transmettre les tâches de calcul au thread de travail pour traitement. Lorsque le calcul du thread de travail est terminé, le résultat est renvoyé au thread principal js. De cette façon, le thread principal js n'a besoin de se concentrer que sur le traitement de la logique métier, et n'a pas besoin de passer trop de temps à traiter un grand nombre de calculs complexes, réduisant ainsi le temps de blocage et améliorant l'efficacité de fonctionnement. sont également améliorés.

La méthode d'utilisation spécifique dans le projet vue3 construit par vite est la suivante :

1. Dans le répertoire src du projet, créez un nouveau dossier de travail et créez un nouveau index.ts

self.onmessage = (e) => {
  console.log('主线程发送过来的数据', e.data)
  const { data } = e
  setTimeout(() => {
    data.name = 'wq'
    self.postMessage(data)
  }, 5000);
}

2. L'application réelle des travailleurs dans le projet

import Worker from '@/worker/index?worker'
// vite项目如何引用worker 参考https://cn.vitejs.dev/guide/features.html

const workderData = ref({
  name: '王琪',
  age: 26
})
const sendData = () => {
  const worker = new Worker()
  worker.postMessage(JSON.parse(JSON.stringify(workderData.value)))
  worker.onmessage = e => {
    console.log('线程完成', e.data)
    workderData.value = e.data
  }
}