Vue Academy · Lezione

Web Worker con Vue

Comlink per un'API tipizzata dei web worker, spostamento dei calcoli pesanti, monitoraggio reattivo dell'avanzamento.

Web Worker con Vue è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Perché utilizzare i Web Worker

JavaScript viene eseguito su un singolo thread principale, condiviso con il rendering. I calcoli pesanti bloccano l'interfaccia. Un Web Worker esegue il codice su un thread separato, mantenendo reattiva l'app Vue.

Creare un worker

Istanzi un worker a partire da un file di modulo. Vite supporta l'opzione { type: "module" } e raggruppa correttamente il worker.

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

Il file del worker

Il worker dispone di un proprio ambito globale e non può accedere al DOM. Resta in ascolto dei messaggi e invia i risultati tramite post.

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

Inviare dati con postMessage

Dal thread principale, chiami postMessage passando un payload di dati. I dati vengono clonati con lo structured clone oltre il confine tra i thread.

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

Ricevere i risultati

Gestisca la risposta del worker con onmessage. La proprietà data dell'evento contiene il valore inviato.

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

Aggiornare un ref reattivo

Nel gestore, scriva il risultato in un ref reattivo, così il template si aggiornerà automaticamente.

import { ref } from "vue";

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

Integrarlo in un composable

Racchiuda il worker in un composable, così potrà riutilizzarlo e gestirne la pulizia. Termini il worker durante lo smontaggio per liberare il 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) };
}

Il problema del protocollo dei messaggi

postMessage allo stato grezzo richiede di inventare un protocollo per i tipi di messaggio e di associare manualmente le richieste alle risposte. Con più operazioni, il codice diventa verboso.

Comlink in soccorso

Comlink racchiude il canale dei messaggi, così chiamare le funzioni del worker è simile a chiamare metodi asincroni locali. Lo installi insieme al worker.

npm install comlink

Esporre un'API dal worker

Nel worker, esponga un oggetto di funzioni con 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 per un proxy tipizzato

Nel thread principale, Comlink.wrap restituisce un proxy i cui metodi restituiscono promise, fornendo un'API tipizzata e pulita per accedere al 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

Verifica rapida

Che cosa offre Comlink.wrap rispetto a postMessage allo stato grezzo?

Riepilogo

Deleghi le operazioni pesanti a un Web Worker creato con new Worker(url, { type: "module" }). Invii i dati con postMessage, gestisca le risposte in onmessage e scriva i risultati in un ref reattivo. Lo racchiuda in un composable che lo termini durante lo smontaggio e utilizzi Comlink.wrap per ottenere un'API proxy pulita, tipizzata e basata su promise.

Domande Frequenti

La lezione «Web Worker con Vue» è gratuita?

Sì — il testo completo di «Web Worker con Vue» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Web Worker con Vue»?

Comlink per un'API tipizzata dei web worker, spostamento dei calcoli pesanti, monitoraggio reattivo dell'avanzamento. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Web Worker con Vue»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy