Vue Academy · Aula

Web Workers com Vue

Comlink para uma API de Web Worker tipada, transferência de cálculos pesados e acompanhamento reativo do progresso.

Aula 4 de 413 etapas

Web Workers com Vue é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Por que usar um Worker da Web

JavaScript é executado em uma única thread principal, compartilhada com a renderização. Cálculos pesados congelam a interface. Um Worker da Web executa o código em uma thread separada, mantendo seu aplicativo Vue responsivo.

Criando um Worker

Instancie um worker a partir de um arquivo de módulo. O Vite oferece suporte à opção { type: "module" } e empacota o worker corretamente.

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

O arquivo do Worker

O worker tem seu próprio escopo global, sem acesso ao DOM. Ele escuta mensagens e envia os resultados de volta.

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

Enviando dados com postMessage

Na thread principal, chame postMessage com uma carga de dados. Os dados são clonados estruturalmente ao atravessar o limite entre as threads.

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

Recebendo resultados

Trate a resposta do worker com onmessage. A propriedade data do evento contém o valor enviado.

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

Atualizando uma referência reativa

Dentro do manipulador, grave o resultado em uma referência reativa para que o modelo seja atualizado automaticamente.

import { ref } from "vue";

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

Integrando-o em uma composição reutilizável

Envolva o worker em uma composição reutilizável para poder reutilizá-lo e limpá-lo adequadamente. Encerre o worker quando o componente for desmontado para liberar a 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) };
}

O problema do protocolo de mensagens

O postMessage bruto exige que você invente um protocolo de tipos de mensagem e associe manualmente as solicitações às respostas. Isso se torna verboso quando há várias operações.

Comlink ao resgate

Comlink envolve o canal de mensagens para que chamar funções do worker pareça chamar métodos assíncronos locais. Instale-o junto com o worker.

npm install comlink

Expondo uma API do Worker

No worker, exponha um objeto de funções com 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 um proxy tipado

Na thread principal, Comlink.wrap retorna um proxy cujos métodos devolvem promessas, oferecendo uma API tipada e simples para o 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ção rápida

O que Comlink.wrap oferece além de postMessage bruto?

Responda na aula interativa

Recapitulação

Transfira o trabalho pesado para um Worker da Web criado com new Worker(url, { type: "module" }). Envie dados com postMessage, trate as respostas em onmessage e grave os resultados em uma referência reativa. Envolva-o em uma composição reutilizável que o encerre quando o componente for desmontado e use Comlink.wrap para obter uma API de proxy simples, tipada e baseada em promessas.

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 42
Aulas: 156

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Web Workers com Vue” é grátis?

Sim — o texto completo de “Web Workers com Vue” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Web Workers com Vue”?

Comlink para uma API de Web Worker tipada, transferência de cálculos pesados e acompanhamento reativo do progresso. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Web Workers com Vue”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Vue Academy