Vue Academy · درس

‏Web Workers مع Vue

‏Comlink لواجهة Web Worker مكتوبة الأنواع، ونقل الحسابات الثقيلة، وتتبع التقدم تفاعليًا

الدرس 4 من 413 خطوة

‏Web Workers مع Vue درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

لماذا نستخدم Web Workers

يعمل 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.js
self.onmessage = (e) => {
  const result = heavyCompute(e.data);
  self.postMessage(result);
};

إرسال البيانات باستخدام postMessage

من الخيط الرئيسي، استدعِ postMessage مع حمولة بيانات. وتُنقل البيانات عبر structured clone عند عبورها الحد الفاصل بين الخيوط.

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

استلام النتائج

عالج رد worker باستخدام onmessage. وتحتوي data في الحدث على القيمة المُرسلة.

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

تحديث reactive ref

داخل المعالج، اكتب النتيجة في reactive ref حتى يُحدَّث القالب تلقائيًا.

import { ref } from "vue";

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

توصيله داخل Composable

غلّف worker داخل composable حتى يمكن إعادة استخدامه وتنظيفه. أنهِ worker عند unmount لتحرير الخيط.

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 كأنه استدعاء لأساليب async محلية. ثبّتها مع 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، واكتب النتائج في reactive ref. غلّفه داخل composable ينهي worker عند unmount، واستخدم Comlink.wrap للحصول على API وكيل نظيف ومقيّد بالأنواع ويعتمد على الوعود.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «‏Web Workers مع Vue» مجاني؟

نعم — نص درس «‏Web Workers مع Vue» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏Web Workers مع Vue»؟

‏Comlink لواجهة Web Worker مكتوبة الأنواع، ونقل الحسابات الثقيلة، وتتبع التقدم تفاعليًا تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «‏Web Workers مع Vue»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy