Vue Academy · Lektion

Web Worker mit Vue

Comlink für eine typisierte Web-Worker-API, Auslagern aufwendiger Berechnungen und reaktive Fortschrittsverfolgung

Web Worker mit Vue ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Web Worker

JavaScript läuft in einem einzigen Hauptthread, den es mit dem Rendering teilt. Aufwendige Berechnungen lassen die Benutzeroberfläche einfrieren. Ein Web Worker führt Code in einem separaten Thread aus und hält Ihre Vue-Anwendung reaktionsfähig.

Einen Worker erstellen

Erstellen Sie einen Worker aus einer Moduldatei. Vite unterstützt die Option { type: "module" } und bündelt den Worker korrekt.

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

Die Worker-Datei

Der Worker verfügt über einen eigenen globalen Gültigkeitsbereich und keinen Zugriff auf das DOM. Er wartet auf Nachrichten und sendet Ergebnisse zurück.

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

Daten mit postMessage senden

Rufen Sie im Hauptthread postMessage mit einer Datennutzlast auf. Die Daten werden über die Thread-Grenze hinweg strukturiert geklont.

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

Ergebnisse empfangen

Verarbeiten Sie die Antwort des Workers mit onmessage. Das data-Feld des Ereignisses enthält den gesendeten Wert.

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

Eine reaktive Ref aktualisieren

Schreiben Sie das Ergebnis innerhalb des Handlers in eine reaktive Ref, damit die Vorlage automatisch aktualisiert wird.

import { ref } from "vue";

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

In einem Composable verbinden

Kapseln Sie den Worker in einem Composable, damit er wiederverwendet und aufgeräumt werden kann. Beenden Sie den Worker beim Unmount, um den Thread freizugeben.

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) };
}

Die Tücken des Nachrichtenprotokolls

Bei der direkten Verwendung von postMessage müssen Sie ein Protokoll für Nachrichtentypen entwerfen und Anfragen und Antworten manuell einander zuordnen. Bei mehreren Operationen wird das schnell umfangreich.

Comlink schafft Abhilfe

Comlink kapselt den Nachrichtenkanal, sodass sich der Aufruf von Worker-Funktionen wie der Aufruf lokaler asynchroner Methoden anfühlt. Installieren Sie Comlink zusammen mit dem Worker.

npm install comlink

Eine API aus dem Worker bereitstellen

Stellen Sie im Worker mit Comlink.expose ein Objekt aus Funktionen bereit.

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

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

Comlink.wrap für einen typisierten Proxy

Im Hauptthread gibt Comlink.wrap einen Proxy zurück, dessen Methoden Promises liefern. Dadurch erhalten Sie eine übersichtliche typisierte API für den 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

Kurze Überprüfung

Was bietet Comlink.wrap gegenüber der direkten Verwendung von postMessage?

Zusammenfassung

Lagern Sie aufwendige Arbeit in einen Web Worker aus, der mit new Worker(url, { type: "module" }) erstellt wird. Senden Sie Daten mit postMessage, verarbeiten Sie Antworten in onmessage und schreiben Sie Ergebnisse in eine reaktive Ref. Kapseln Sie den Worker in einem Composable, das ihn beim Unmount beendet, und verwenden Sie Comlink.wrap für eine übersichtliche, typisierte und Promise-basierte Proxy-API.

Häufig gestellte Fragen

Ist die Lektion „Web Worker mit Vue“ kostenlos?

Ja — der vollständige Text von „Web Worker mit Vue“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Web Worker mit Vue“?

Comlink für eine typisierte Web-Worker-API, Auslagern aufwendiger Berechnungen und reaktive Fortschrittsverfolgung Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Web Worker mit Vue“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Vue Academy