Vue Academy · Lección

Web Workers con Vue

Comlink para una API tipada de web workers, delegación de cálculos pesados y seguimiento reactivo del progreso

Lección 4 de 413 pasos

Web Workers con Vue es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Por qué usar Web Workers

JavaScript se ejecuta en un único hilo principal que comparte con el renderizado. Los cálculos pesados congelan la interfaz. Un Web Worker ejecuta el código en un hilo separado y mantiene su aplicación Vue receptiva.

Crear un worker

Cree un worker a partir de un archivo de módulo. Vite admite la opción { type: "module" } y empaqueta el worker correctamente.

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

El archivo del worker

El worker tiene su propio ámbito global y no puede acceder al DOM. Escucha mensajes y envía los resultados de vuelta.

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

Enviar datos con postMessage

Desde el hilo principal, llame a postMessage con una carga de datos. Los datos se clonan mediante el algoritmo de clonación estructurada al pasar de un hilo a otro.

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

Recibir resultados

Gestione la respuesta del worker con onmessage. La propiedad data del evento contiene el valor enviado.

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

Actualizar un ref reactivo

Dentro del controlador, escriba el resultado en un ref reactivo para que la plantilla se actualice automáticamente.

import { ref } from "vue";

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

Integrarlo en un composable

Envuelva el worker en un composable para poder reutilizarlo y limpiarlo correctamente. Termine el worker al desmontarlo para liberar el hilo.

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

La complejidad del protocolo de mensajes

El uso directo de postMessage le obliga a inventar un protocolo de tipos de mensajes y a asociar manualmente las solicitudes con las respuestas. Esto se vuelve muy verboso cuando hay varias operaciones.

Comlink al rescate

Comlink envuelve el canal de mensajes para que llamar a funciones del worker parezca llamar a métodos asíncronos locales. Instálelo junto con el worker.

npm install comlink

Exponer una API desde el worker

En el worker, exponga un objeto de funciones 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 para un proxy tipado

En el hilo principal, Comlink.wrap devuelve un proxy cuyos métodos retornan promesas, lo que le proporciona una API tipada y clara para acceder 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

Comprobación rápida

¿Qué ofrece Comlink.wrap frente al uso directo de postMessage?

Responde en la lección interactiva

Recapitulación

Traslade el trabajo pesado a un Web Worker creado con new Worker(url, { type: "module" }). Envíe datos con postMessage, gestione las respuestas en onmessage y escriba los resultados en un ref reactivo. Envuélvalo en un composable que lo termine al desmontarse y utilice Comlink.wrap para obtener una API proxy limpia, tipada y basada en promesas.

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 42
Lecciones: 156

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Web Workers con Vue» es gratis?

Sí — el texto completo de «Web Workers con Vue» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Web Workers con Vue»?

Comlink para una API tipada de web workers, delegación de cálculos pesados y seguimiento reactivo del progreso Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Web Workers con Vue»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Vue Academy