Vue Academy · درس

‏Vue Vapor Mode: تحسين وقت الترجمة

يزيل Vapor mode الـ virtual DOM، وما يعنيه ذلك للأداء، والترجمة الاختيارية

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

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

ما هو Vapor Mode

Vapor Mode هو استراتيجية تجميع بديلة لـ Vue تزيل DOM الافتراضي بالكامل. فبدلًا من مقارنة أشجار VNode، يُصدر المصرّف شيفرة تحدّث عقد DOM الحقيقية مباشرةً. وهو اختياري ويهدف إلى تحقيق مكاسب كبيرة في الأداء والذاكرة.

كيف يعمل DOM الافتراضي حاليًا

عادةً، تعيد دالة التصيير شجرة من VNodes. عند كل تحديث، ينشئ Vue شجرة جديدة ويقارنها بالشجرة القديمة لاكتشاف التغييرات. وتكلف هذه المقارنة وقتًا أثناء التشغيل وتخصّص كائنات في كل عملية تصيير.

// conceptually, each render produces VNodes
function render() {
  return h('div', null, [
    h('span', null, count.value)
  ])
}
// Vue diffs new VNodes vs old to patch the DOM

Vapor: تحديثات DOM مباشرة

في Vapor Mode، يحلل المصرّف القالب وقت الترجمة ويولّد شيفرة تلمس عقد DOM المحددة التي يمكن أن تتغير فقط. لا توجد شجرة VNode ولا مقارنة؛ إذ يكتب التأثير التفاعلي مباشرةً إلى العقدة.

// conceptual Vapor output
const n0 = document.createElement('span')
// effect updates ONLY the text node when count changes
renderEffect(() => {
  n0.textContent = count.value
})

نظام التفاعلية نفسه

يحافظ Vapor على نظام التفاعلية المألوف في Vue؛ إذ تعمل ref وreactive وcomputed وwatch بالطريقة نفسها. وما يتغير هو أسلوب تطبيق تحديثات DOM، لا طريقة تعريف الحالة التفاعلية.

import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)
// identical authoring experience under Vapor

التفعيل الاختياري لكل مكوّن

يتم تفعيل Vapor لكل مكوّن على حدة، وليس على مستوى التطبيق بالكامل. يتيح لك ذلك الترحيل تدريجيًا والخلط بين المكوّنات التي تستخدم Vapor والمكوّنات العادية في التطبيق نفسه. ومن الأساليب الشائعة استخدام علامة في <script setup> أو في إعدادات البناء.

<script setup vapor>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

لماذا هو أسرع

من خلال تجاوز إنشاء VNode والمقارنة التفاضلية، يقلّل Vapor العمل الذي تنفّذه وحدة المعالجة المركزية لكل تحديث، ويخصّص عددًا أقل بكثير من الكائنات، مما يخفف الضغط على عملية جمع البيانات المهملة. كما ينتج عن التركيب الأولي حمل أقل وقت التشغيل، فتقلّ مساحة الذاكرة المستخدمة.

وقت تشغيل أصغر

لأن المكوّنات التي تستخدم Vapor لا تحتاج إلى وقت تشغيل DOM الافتراضي، يمكن لتطبيق مبني بالكامل باستخدام Vapor أن يرسل حزمة وقت تشغيل أصغر. فلن تُضمَّن آلية المقارنة التفاضلية أصلًا.

التحليل وقت الترجمة

تنبع القوة من قدرة المصرّف على التمييز بين الأجزاء الثابتة والديناميكية في القالب. يُنشأ الترميز الثابت مرة واحدة، بينما تحصل الارتباطات الديناميكية وحدها على تأثيرات تفاعلية. وهذا الفصل بين الثابت والديناميكي هو ما يتيح إجراء تحديثات مباشرة.

<template>
  <div class="card">     <!-- static, created once -->
    <h2>{{ title }}</h2>  <!-- dynamic, gets an effect -->
  </div>
</template>

القيود والتوافق التشغيلي

خلال المرحلة التجريبية، قد لا تكون بعض الميزات والمكتبات التابعة لجهات خارجية التي تعتمد على DOM الافتراضي، مثل دوال التصيير المخصّصة وبعض واجهات VNode البرمجية، مدعومة بالكامل في المكوّنات التي تستخدم Vapor. أما التوافق التشغيلي مع المكوّنات العادية فهو مدعوم، لذا يمكنك اعتماده تدريجيًا.

العلاقة مع Solid وSvelte

يقرّب Vapor Vue من نهج الترجمة وقت الترجمة ومن دون DOM افتراضي الذي ابتكره Solid وSvelte، إذ تقود التفاعلية الدقيقة عمليات تعديل مباشرة لـ DOM، مع الحفاظ على واجهة برمجة Vue ونظامها البيئي.

متى تختار Vapor

فكّر في استخدام Vapor لواجهات المستخدم الحساسة للأداء وكثيرة التحديثات، مثل القوائم الكبيرة ولوحات المعلومات والرسوم المتحركة، بعد أن يصبح مستقرًا. أما في التطبيقات المعتادة، فوقت التشغيل القياسي سريع بما يكفي أصلًا؛ لذا اعتمد Vapor انتقائيًا حيث يبيّن تحليل الأداء فائدته.

اختبار سريع

اختبر مدى فهمك لوضع Vapor.

أجب عليها في الدرس التفاعلي

مراجعة

تعرّفت إلى وضع Vapor:

يزيل المقارنة التفاضلية لـ DOM الافتراضي؛ ويصدر المصرّف شيفرة لتحديث DOM مباشرة
نظام التفاعلية نفسه — لا تتغير ref وreactive وcomputed
تفعيل اختياري لكل مكوّن، مما يتيح الاعتماد التدريجي والتوافق التشغيلي
يقود التحليل وقت الترجمة للأجزاء الثابتة والديناميكية إلى تحديثات دقيقة
من المتوقع تحقيق مكاسب ملحوظة في الأداء والذاكرة وحجم وقت التشغيل

البدء مجانًا

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

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

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

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

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

هل درس «‏Vue Vapor Mode: تحسين وقت الترجمة» مجاني؟

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

ماذا ستتعلم في «‏Vue Vapor Mode: تحسين وقت الترجمة»؟

يزيل Vapor mode الـ virtual DOM، وما يعنيه ذلك للأداء، والترجمة الاختيارية تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «‏Vue Vapor Mode: تحسين وقت الترجمة»؟

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

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

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

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

‏Vue Vapor Mode: تحسين وقت الترجمة
منظومة Vite: الإضافات وأدوات التطوير
‏Vue Macros ومقترحات المجتمع
اختيار حزمة Vue المناسبة لعام 2025 وما بعده

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