Vue Academy · Leçon

Web Workers avec Vue

Comlink pour une API de web worker typée, déport du calcul intensif et suivi réactif de la progression

Leçon 4 sur 413 étapes

Web Workers avec Vue est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Pourquoi utiliser un worker

JavaScript s’exécute sur un seul thread principal, partagé avec le rendu. Les calculs lourds bloquent l’interface. Un worker s’exécute sur un thread distinct et garde ainsi votre application Vue réactive.

Créer un worker

Instanciez un worker à partir d’un fichier de module. Vite prend en charge l’option { type: "module" } et regroupe correctement le worker.

const worker = new Worker(
  new URL("./worker.js", import.meta.url),
  { type: "module" }
);

Le fichier du worker

Le worker possède sa propre portée globale et n’a pas accès au DOM. Il écoute les messages et renvoie les résultats.

// worker.js
self.onmessage = (e) => {
  const result = heavyCompute(e.data);
  self.postMessage(result);
};

Envoyer des données avec postMessage

Depuis le thread principal, appelez postMessage avec une charge utile de données. Les données sont clonées selon l’algorithme de clonage structuré lors de leur passage d’un thread à l’autre.

worker.postMessage({ numbers: [1, 2, 3] });

Recevoir les résultats

Gérez la réponse du worker avec onmessage. La propriété data de l’événement contient la valeur envoyée.

worker.onmessage = (e) => {
  console.log("result", e.data);
};

Mettre à jour une référence réactive

Dans le gestionnaire, écrivez le résultat dans une référence réactive afin que le modèle se mette automatiquement à jour.

import { ref } from "vue";

const result = ref(null);
worker.onmessage = (e) => {
  result.value = e.data;
};

L’intégrer dans un composable

Enveloppez le worker dans un composable afin de pouvoir le réutiliser et le nettoyer. Terminez le worker lors du démontage pour libérer le thread.

import { ref, onUnmounted } from "vue";

export function useWorker() {
  const worker = new Worker(
    new URL("./worker.js", import.meta.url),
    { type: "module" }
  );
  const result = ref(null);
  worker.onmessage = (e) => { result.value = e.data; };
  onUnmounted(() => worker.terminate());
  return { result, run: (d) => worker.postMessage(d) };
}

Les difficultés du protocole de messages

Avec postMessage brut, vous devez inventer un protocole de types de messages et associer manuellement les requêtes aux réponses. Cela devient verbeux lorsque plusieurs opérations sont nécessaires.

Comlink à la rescousse

Comlink enveloppe le canal de messages afin que l’appel des fonctions du worker ressemble à celui de méthodes asynchrones locales. Installez-le avec le worker.

npm install comlink

Exposer une interface depuis le worker

Dans le worker, exposez un objet contenant des fonctions avec Comlink.expose.

// worker.js
import * as Comlink from "comlink";

const api = {
  add: (a, b) => a + b,
  process: (data) => heavyCompute(data)
};
Comlink.expose(api);

Comlink.wrap pour un proxy typé

Sur le thread principal, Comlink.wrap renvoie un proxy dont les méthodes renvoient des promesses, ce qui vous fournit une interface typée claire vers le worker.

import * as Comlink from "comlink";

const worker = new Worker(
  new URL("./worker.js", import.meta.url),
  { type: "module" }
);
const api = Comlink.wrap(worker);

const sum = await api.add(2, 3); // 5

Vérification rapide

Que fournit Comlink.wrap par rapport à postMessage brut ?

Réponds-y dans la leçon interactive

Récapitulatif

Déportez les tâches lourdes vers un worker créé avec new Worker(url, { type: "module" }). Envoyez les données avec postMessage, gérez les réponses dans onmessage et écrivez les résultats dans une référence réactive. Enveloppez le tout dans un composable qui termine le worker lors du démontage, et utilisez Comlink.wrap pour obtenir une interface proxy propre, typée et fondée sur les promesses.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 42
Leçons: 156

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Web Workers avec Vue » est-elle gratuite ?

Oui — le texte complet de « Web Workers avec Vue » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Web Workers avec Vue » ?

Comlink pour une API de web worker typée, déport du calcul intensif et suivi réactif de la progression Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Web Workers avec Vue » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Vue Academy