Vue Academy · Урок

Web Workers с Vue

Comlink для типизированного API веб-воркера, перенос ресурсоёмких вычислений и реактивное отслеживание прогресса

Урок 4 из 413 шагов

«Web Workers с Vue» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Зачем нужны веб-воркеры

JavaScript работает в одном основном потоке, который используется и для отображения. Тяжёлые вычисления замораживают интерфейс. Веб-воркер выполняет код в отдельном потоке, сохраняя отзывчивость приложения Vue.

Создание worker

Создайте worker из файла модуля. Vite поддерживает параметр { type: "module" } и правильно собирает worker.

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

Файл worker

У worker есть собственная глобальная область видимости без доступа к DOM. Он прослушивает сообщения и отправляет результаты обратно.

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

Передача данных с помощью postMessage

Из основного потока вызовите postMessage, передав полезную нагрузку с данными. Данные структурированно клонируются при передаче между потоками.

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

Получение результатов

Обработайте ответ worker с помощью onmessage. Свойство data события содержит отправленное значение.

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

Обновление реактивной ссылки

В обработчике запишите результат в реактивную ссылку, чтобы шаблон обновлялся автоматически.

import { ref } from "vue";

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

Подключение в composable-функции

Оберните worker в composable-функцию, чтобы повторно использовать его и корректно освобождать ресурсы. При размонтировании завершайте worker, чтобы освободить поток.

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

Проблемы протокола сообщений

При использовании обычного postMessage вам приходится вручную придумывать протокол типов сообщений и сопоставлять запросы с ответами. При нескольких операциях это приводит к большому объёму кода.

Comlink на помощь

Comlink оборачивает канал сообщений, поэтому вызов функций worker похож на вызов локальных асинхронных методов. Установите Comlink вместе с worker.

npm install comlink

Предоставление интерфейса из worker

В worker предоставьте объект функций с помощью 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 для типизированного прокси

В основном потоке Comlink.wrap возвращает прокси, методы которого возвращают промисы, предоставляя удобный типизированный интерфейс 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

Быстрая проверка

Что даёт Comlink.wrap по сравнению с обычным postMessage?

Ответь в интерактивном уроке

Итоги

Перенесите тяжёлую работу в веб-воркер, созданный с помощью new Worker(url, { type: "module" }). Отправляйте данные через postMessage, обрабатывайте ответы в onmessage и записывайте результаты в реактивную ссылку. Оберните worker в composable-функцию, которая завершает его при размонтировании, а для удобного типизированного прокси-интерфейса на основе промисов используйте Comlink.wrap.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Web Workers с Vue» бесплатный?

Да — полный текст урока «Web Workers с Vue» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Web Workers с Vue»?

Comlink для типизированного API веб-воркера, перенос ресурсоёмких вычислений и реактивное отслеживание прогресса Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Web Workers с Vue»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy