Vue Academy · Pelajaran

Web Worker dengan Vue

Comlink untuk API web worker bertipe, memindahkan komputasi berat, serta melacak progres secara reaktif.

Web Worker dengan Vue adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Mengapa Menggunakan Web Worker

JavaScript berjalan pada satu utas utama yang digunakan bersama dengan proses renderisasi. Perhitungan berat akan membekukan antarmuka pengguna. Web Worker menjalankan kode pada utas terpisah sehingga aplikasi Vue Anda tetap responsif.

Membuat Worker

Buat worker dari berkas modul. Vite mendukung opsi { type: "module" } dan mengemas worker dengan benar.

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

Berkas Worker

Worker memiliki cakupan globalnya sendiri tanpa akses ke DOM. Worker mendengarkan pesan dan mengirimkan kembali hasilnya.

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

Mengirim Data dengan postMessage

Dari utas utama, panggil postMessage dengan muatan data. Data tersebut disalin secara terstruktur melintasi batas utas.

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

Menerima Hasil

Tangani balasan worker dengan onmessage. Properti data pada peristiwa tersebut berisi nilai yang dikirim.

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

Memperbarui Ref Reaktif

Di dalam penangan, tuliskan hasil ke dalam ref reaktif agar templat diperbarui secara otomatis.

import { ref } from "vue";

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

Menghubungkannya dalam Komposabel

Bungkus worker dalam komposabel agar dapat digunakan kembali dan dibersihkan. Hentikan worker saat komponen dilepas untuk membebaskan utasnya.

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

Kerepotan Protokol Pesan

postMessage mentah mengharuskan Anda membuat protokol jenis pesan dan mencocokkan permintaan dengan balasan secara manual. Cara ini menjadi panjang jika terdapat banyak operasi.

Comlink sebagai Solusi

Comlink membungkus saluran pesan sehingga pemanggilan fungsi worker terasa seperti memanggil metode asinkron lokal. Pasang Comlink bersama worker.

npm install comlink

Menyediakan API dari Worker

Di dalam worker, sediakan objek berisi berbagai fungsi dengan 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 untuk Proksi Bertipe

Di utas utama, Comlink.wrap mengembalikan proksi yang metodenya menghasilkan nilai secara asinkron, sehingga Anda memperoleh API bertipe yang rapi untuk mengakses 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

Pemeriksaan Singkat

Apa yang disediakan Comlink.wrap dibandingkan dengan postMessage mentah?

Ringkasan

Alihkan pekerjaan berat ke Web Worker yang dibuat dengan new Worker(url, { type: "module" }). Kirim data dengan postMessage, tangani balasan melalui onmessage, lalu tuliskan hasilnya ke dalam ref reaktif. Bungkus worker dalam komposabel yang menghentikannya saat komponen dilepas, dan gunakan Comlink.wrap untuk API proksi yang rapi, bertipe, serta berbasis operasi asinkron.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Web Worker dengan Vue” gratis?

Ya — teks lengkap “Web Worker dengan Vue” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Web Worker dengan Vue”?

Comlink untuk API web worker bertipe, memindahkan komputasi berat, serta melacak progres secara reaktif. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Web Worker dengan Vue” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

v-memo untuk Memoisasi Template
Membuat Profil dengan Tab Performa Vue DevTools
Scroll Virtual untuk Daftar Besar
Web Worker dengan Vue

← Kembali ke Vue Academy