Web Workers met Vue
Comlink voor een getypeerde webworker-API, zware berekeningen uitbesteden en reactieve voortgang volgen.
Web Workers met Vue is een gratis Vue Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.
Waarom webworkers
JavaScript wordt uitgevoerd op één hoofdthread die wordt gedeeld met het weergeven. Zware berekeningen bevriezen de gebruikersinterface. Een webworker voert code uit op een aparte thread, zodat je Vue-app responsief blijft.
Een worker maken
Maak een worker aan vanuit een modulebestand. Vite ondersteunt de optie { type: "module" } en bundelt de worker correct.
const worker = new Worker(
new URL("./worker.js", import.meta.url),
{ type: "module" }
);Het workerbestand
De worker heeft een eigen globaal bereik zonder DOM-toegang. De worker luistert naar berichten en stuurt resultaten terug.
// worker.js
self.onmessage = (e) => {
const result = heavyCompute(e.data);
self.postMessage(result);
};Gegevens verzenden met postMessage
Roep vanuit de hoofdthread postMessage aan met een gegevenslading. De gegevens worden gestructureerd gekloond over de grens tussen de threads heen.
worker.postMessage({ numbers: [1, 2, 3] });Resultaten ontvangen
Verwerk het antwoord van de worker met onmessage. De data van de gebeurtenis bevat de verzonden waarde.
worker.onmessage = (e) => {
console.log("result", e.data);
};Een reactieve ref bijwerken
Schrijf het resultaat in de handler naar een reactieve ref, zodat het sjabloon automatisch wordt bijgewerkt.
import { ref } from "vue";
const result = ref(null);
worker.onmessage = (e) => {
result.value = e.data;
};Inbouwen in een composable
Verpak de worker in een composable zodat deze kan worden hergebruikt en opgeruimd. Beëindig de worker wanneer de component wordt verwijderd om de thread vrij te geven.
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) };
}De nadelen van het berichtenprotocol
Met het directe gebruik van postMessage moet je zelf een protocol voor berichttypen bedenken en verzoeken handmatig aan antwoorden koppelen. Bij meerdere bewerkingen wordt dit omslachtig.
Comlink als oplossing
Comlink verpakt het berichtenkanaal, zodat het aanroepen van workerfuncties voelt als het aanroepen van lokale asynchrone methoden. Installeer het samen met de worker.
npm install comlinkEen API vanuit de worker beschikbaar maken
Maak in de worker een object met functies beschikbaar met 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 voor een getypeerde proxy
Op de hoofdthread retourneert Comlink.wrap een proxy waarvan de methoden beloften retourneren. Zo krijg je een overzichtelijke, getypeerde API naar de 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); // 5Korte controle
Wat biedt Comlink.wrap boven het directe gebruik van postMessage?
Samenvatting
Zet zwaar werk over naar een webworker die je maakt met new Worker(url, { type: "module" }). Verzend gegevens met postMessage, verwerk antwoorden in onmessage en schrijf resultaten naar een reactieve ref. Verpak dit in een composable die bij het verwijderen van de component wordt beëindigd en gebruik Comlink.wrap voor een overzichtelijke, getypeerde proxy-API op basis van beloften.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 42
- Lessen
- 156
Veelgestelde vragen
Is de les “Web Workers met Vue” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Web Workers met Vue”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.
Wat leer ik in “Web Workers met Vue”?
Comlink voor een getypeerde webworker-API, zware berekeningen uitbesteden en reactieve voortgang volgen. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vue Academy te beginnen?
Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Web Workers met Vue”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vue Academy?
Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- v-memo voor template-memoization
- Profileren met het Performance-tabblad van Vue DevTools
- Virtual scrolling voor grote lijsten
- Web Workers met Vue