0Pricing
Vue Academy · บทเรียน

Web Worker กับ Vue

Comlink สำหรับ API ของ Web Worker แบบมีชนิด การย้ายการคำนวณหนักไปทำเบื้องหลัง และการติดตามความคืบหน้าแบบรีแอกทีฟ

Web Worker กับ Vue เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุผลที่ใช้ Web Worker

JavaScript ทำงานบนเธรดหลักเดียวที่ใช้ร่วมกับการเรนเดอร์ การคำนวณที่ใช้เวลามากจะทำให้ส่วนติดต่อผู้ใช้ค้าง Web Worker ทำงานบนเธรดแยกต่างหาก จึงช่วยให้แอป Vue ของคุณยังตอบสนองได้

สร้าง Worker

สร้างอินสแตนซ์ของ Worker จากไฟล์โมดูล Vite รองรับตัวเลือก { type: "module" } และบันเดิล Worker ได้อย่างถูกต้อง

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

ไฟล์ Worker

Worker มีขอบเขตส่วนกลางของตัวเองและไม่สามารถเข้าถึง DOM ได้ Worker จะรับฟังข้อความและส่งผลลัพธ์กลับ

// 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

เปิดเผย API จาก 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 จะส่งคืนพร็อกซีที่เมธอดต่าง ๆ ส่งคืนพรอมิส ทำให้คุณมี API ที่มีชนิดข้อมูลชัดเจนสำหรับเข้าถึง 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 แบบดิบ

สรุปทบทวน

ย้ายงานที่ใช้การคำนวณมากไปยัง Web Worker ที่สร้างด้วย new Worker(url, { type: "module" }) ส่งข้อมูลด้วย postMessage จัดการการตอบกลับใน onmessage และเขียนผลลัพธ์ลงในรีแอกทีฟรีฟ ครอบ Worker ไว้ใน Composable ที่จะยุติการทำงานเมื่อถอดเมานต์ และใช้ Comlink.wrap เพื่อสร้าง API พร็อกซีที่สะอาด มีชนิดข้อมูล และอาศัยพรอมิส

คำถามที่พบบ่อย

บทเรียน “Web Worker กับ Vue” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Web Worker กับ Vue” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Web Worker กับ Vue”

Comlink สำหรับ API ของ Web Worker แบบมีชนิด การย้ายการคำนวณหนักไปทำเบื้องหลัง และการติดตามความคืบหน้าแบบรีแอกทีฟ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “Web Worker กับ Vue” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. v-memo สำหรับการจดจำเทมเพลต
  2. การวิเคราะห์ประสิทธิภาพด้วยแท็บ Performance ของ Vue DevTools
  3. การเลื่อนเสมือนสำหรับรายการขนาดใหญ่
  4. Web Worker กับ Vue
← กลับไปที่ Vue Academy