Vue Academy · Lekcja

Web Workers z Vue

Comlink do typowanego API web workera, przenoszenie ciężkich obliczeń oraz reaktywne śledzenie postępu.

Web Workers z Vue to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Dlaczego warto używać Web Workerów

JavaScript działa w jednym głównym wątku współdzielonym z renderowaniem. Intensywne obliczenia zamrażają interfejs użytkownika. Web Worker wykonuje kod w osobnym wątku, dzięki czemu aplikacja Vue pozostaje responsywna.

Tworzenie Workera

Należy utworzyć workera na podstawie pliku modułu. Vite obsługuje opcję { type: "module" } i prawidłowo bundluje workera.

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

Plik Workera

Worker ma własny zakres globalny i nie ma dostępu do DOM-u. Nasłuchuje komunikatów i wysyła wyniki z powrotem.

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

Wysyłanie danych za pomocą postMessage

W głównym wątku należy wywołać postMessage z ładunkiem danych. Dane są klonowane strukturalnie podczas przekazywania przez granicę wątków.

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

Odbieranie wyników

Odpowiedź workera należy obsłużyć za pomocą onmessage. Właściwość data zdarzenia zawiera przekazaną wartość.

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

Aktualizowanie reaktywnego ref

Wewnątrz procedury obsługi należy zapisać wynik w reaktywnym ref, aby szablon zaktualizował się automatycznie.

import { ref } from "vue";

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

Podłączanie w composable

Należy opakować workera w composable, aby można było go ponownie wykorzystywać i prawidłowo usuwać. Przy odmontowaniu należy zakończyć działanie workera, aby zwolnić wątek.

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

Problem z protokołem komunikatów

Surowe postMessage wymaga samodzielnego zaprojektowania protokołu typów komunikatów oraz ręcznego dopasowywania żądań do odpowiedzi. Przy wielu operacjach szybko staje się to rozwlekłe.

Comlink na ratunek

Comlink opakowuje kanał komunikatów, dzięki czemu wywoływanie funkcji workera przypomina wywoływanie lokalnych metod asynchronicznych. Należy zainstalować go razem z workerem.

npm install comlink

Udostępnianie API z Workera

W workerze należy udostępnić obiekt funkcji za pomocą 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 dla typowanego proxy

W głównym wątku Comlink.wrap zwraca proxy, którego metody zwracają obietnice, zapewniając przejrzyste, typowane API do workera.

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

Szybkie sprawdzenie

Co zapewnia Comlink.wrap w porównaniu z surowym postMessage?

Podsumowanie

Należy przenieść intensywne obliczenia do Workera utworzonego za pomocą new Worker(url, { type: "module" }). Dane należy wysyłać przez postMessage, odpowiedzi obsługiwać w onmessage, a wyniki zapisywać w reaktywnym ref. Workera należy opakować w composable kończący jego działanie przy odmontowaniu, a do uzyskania przejrzystego, typowanego proxy opartego na obietnicach należy użyć Comlink.wrap.

Często zadawane pytania

Czy lekcja „Web Workers z Vue” jest bezpłatna?

Tak — pełny tekst „Web Workers z Vue” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Web Workers z Vue”?

Comlink do typowanego API web workera, przenoszenie ciężkich obliczeń oraz reaktywne śledzenie postępu. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Web Workers z Vue”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy