Vue.js: مقدمة إلى Vue.js

آخر تحديث: 2026-08-26

Vue.js هو framework جافا سكريبت تدريجي لإنشاء واجهات المستخدم — وهو يتيح لك تطوير تطبيقات الويب بكفاءة باستخدام نهج إعلاني قائم على المكونات، بدءًا من النماذج البسيطة وصولاً إلى تطبيقات الويب أحادية الصفحة (SPA) المعقدة على مستوى المؤسسات.

تم تصميم هذا البرنامج التعليمي للمبتدئين الذين لديهم معرفة أساسية بـ HTML و CSS و JavaScript. يبدأ البرنامج بالمفاهيم الأساسية لـ Vue 3 ويتطور تدريجيًّا حتى تتمكن من تطوير نظام خلفي متكامل ومتوسط الحجم للتجارة الإلكترونية بشكل مستقل. يختلف مسار التعلم هنا عن مسار W3Schools و Newbie Tutorial — فنحن نتبع نهجًا يُركز أولًا على Vue 3 و Composition API، باستخدام مشروع تجارة إلكترونية حقيقي (نظام خلفي SaaS يضم 5,000 تاجر و30,000 وحدة تخزين) كتمرين عملي.

1. ما ستتعلمه

• ما هو Vue.js، وما المقصود فعليًّا بعبارة «framework تدريجي»؟
• الاختلافات الرئيسية بين Vue 3 و Vue 2 (لماذا يجب أن تتعلم Vue 3)
• المقارنة والاختيار بين واجهة برمجة التطبيقات (API) الخاصة بالتكوين وواجهة برمجة التطبيقات (API) الخاصة بالخيارات
• منظومة Vue 3: أدوار Vite وVue Router وPinia وElement Plus
• من الذي ينبغي أن يتعلم Vue، وما الذي يمكنك فعله بعد تعلمها؟

2. قصة اختيار تقنية الواجهة الأمامية لفريق SaaS

(1) التحدي: خمسة أطر عمل — أي منها يجب أن تختار؟

في شركة SaaS سريعة النمو تضم 200,000 سطر من كود الواجهة الأمامية، تواجه أليس، المسؤولة التقنية، قرارًا صعبًا في الربع الأول من عام 2026:

• React 18+: مألوف لدى الفريق، لكن حجم الحزمة يبلغ 850 كيلوبايت، ومدة التحميل الأولي 3.2 ثانية
• Vue 3: فريق لا يمتلك أي خبرة، لكن حجم الحزمة يبلغ 280 كيلوبايت ووقت التحميل الأولي يبلغ 0.9 ثانية
• Angular 17: متوافق مع TypeScript، لكنه يتطلب جهدًا كبيرًا في التعلم؛ حيث يستغرق المبتدئون حوالي شهرين حتى يتقنوا استخدامه
• Svelte 4: تحسينات في مرحلة الترجمة، لكن نظامها البيئي صغير وسوق العمل فيها صعب
• Solid.js: يقدم أفضل أداء، لكن مع وجود مجتمع يضم 50,000 شخص، لن تجد إجابات لأسئلتك على موقع Stack Overflow

ويزيد مدير المنتج تشارلي من الضغط قائلاً:

"لدينا 30,000 وحدة تخزين (SKU) في لوحة التحكم الإدارية. تستغرق عملية التصفية 8 ثوانٍ في تطبيق React الحالي. ويستغرق المطورون الجدد 3 أسابيع لإطلاق أول ميزة لهم. نحن بحاجة إلى تحسين أداء كل من هذين الجانبين بمقدار 5 أضعاف — بحلول الربع الثالث من عام 2026."

(2) الحل في Vue 3

بعد 4 أسابيع من التقييم، اختارت أليس Vue 3. وإليكم الأسباب:

Bundle size:     850KB → 280KB    (-67%)
Initial load:    3.2s  → 0.9s    (-72%)
Onboarding time: 3 weeks → 1 week (-67%)
Job market:      growing 35% YoY

إن الطبيعة «التدريجية» لـ Vue تعني أن أليس يمكنها تبنيها بشكل تدريجي:

1. الأسبوع الأول: استبدال صفحة واحدة باستخدام Vue 3 (tag نصية CDN، بدون خطوة بناء)
2. الأسبوع الرابع: تحويل 10 صفحات إلى مكونات ملف واحد
3. الأسبوع 12: حزمة SPA كاملة مع جهاز التوجيه + Pinia
4. الأسبوع 24: تم ترحيل 200,000 سطر، دون أي توقف في الخدمة

(3) الإيرادات

بعد 6 أشهر من استخدام Vue 3، قام الفريق بقياس ما يلي:

• الأداء: وقت تصفية لوحة المعلومات 8 ثوانٍ → 0.8 ثانية (أسرع بـ 10 أضعاف)
• الإنتاجية: إطلاق الميزات الجديدة في غضون 3 أسابيع → أسبوع واحد
• جودة التوظيف: تمت مقابلة 5 مرشحين، وكان لدى 4 منهم خبرة في Vue (مقابل 2 في React)
• الحزمة: توفير 570 كيلوبايت = زيادة سرعة تحميل الصفحة بنسبة 30% = ارتفاع معدل التحويل بنسبة 8%

3. ما هو Vue؟

Vue (تُنطق /vjuː/، على غرار كلمة "view") هو framework جافا سكريبت تقدمي لإنشاء واجهات المستخدم. أنشأه إيفان يو في عام 2014، ويقوم حالياً بصيانته فريق Vue.js الأساسي والمجتمع العالمي.

(1) التعريفات الأساسية + مخطط بنية Vue 3

graph TB
    subgraph Vue3Ecology
        V[Vue 3 Core<br/>@vue/runtime-core]
        R[Vue Router 4<br/>Route Management]
        P[Pinia<br/>State Management]
        S[SSR/SSG<br/>Nuxt 3]
        T[Vite<br/>Build Tools]
        U[UI Component Library<br/>Element Plus/Naive UI]
    end
    
    V --> R
    V --> P
    V --> S
    T --> V
    U --> V
    
    style V fill:#42b883,color:#fff
    style R fill:#35495e,color:#fff
    style P fill:#ffd02f
    style S fill:#00dc82
    style T fill:#646cff,color:#fff

graph TB
    subgraph Vue3Ecology
        V[Vue 3 Core<br/>@vue/runtime-core]
        R[Vue Router 4<br/>Route Management]
        P[Pinia<br/>State Management]
        S[SSR/SSG<br/>Nuxt 3]
        T[Vite<br/>Build Tools]
        U[UI Component Library<br/>Element Plus/Naive UI]
    end
    
    V --> R
    V --> P
    V --> S
    T --> V
    U --> V
    
    style V fill:#42b883,color:#fff
    style R fill:#35495e,color:#fff
    style P fill:#ffd02f
    style S fill:#00dc82
    style T fill:#646cff,color:#fff

(2) خمس ميزات رئيسية

(3) حالات استخدام Vue

4. Vue 3 مقابل Vue 2: الاختلافات الرئيسية

(1) نظرة عامة على التحسينات الرئيسية

(2) لماذا يُوصى باستخدام Vue 3؟

✅ Vue 3 is the current major version (2020-09 Published, 2026 Stable 5+ years)
✅ Vue 2 As of 2023-12 EOL(End of Life),No longer maintained
✅ 90% New Project,100% The new ecosystem tools are all based on Vue 3
✅ Composition API is the Modern Writing Style Recommended by the Vue Team
✅ TypeScript Significant Improvement in Support,Team Code Quality ↑

❌ Vue 2 This is only necessary when maintaining legacy projects.
❌ Not studying Vue 3 = Missed Vue Ecology 95% Modern tools

5. واجهة برمجة التطبيقات (API) الخاصة بـ «Composition» مقابل واجهة برمجة التطبيقات (API) الخاصة بـ «Options»

(1) مقارنة بين نمطين من واجهات برمجة التطبيقات (API)

(2) أمثلة على واجهة برمجة تطبيقات الخيارات

// Options API - Group by option
export default {
  data() {
    return { count: 0, name: 'Alice' }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('Component mounted')
  }
}

(3) مثال على واجهة برمجة التطبيقات (API) الخاصة بـ Composition

// Composition API - Logical Blocking
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const name = ref('Alice')
    
    const doubleCount = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    onMounted(() => {
      console.log('Component mounted')
    })
    
    return { count, name, doubleCount, increment }
  }
}

(4) أيهما يجب أن أختار؟

6. منظومة Vue 3

Vue 3 ليس مجرد framework، بل هو منظومة كاملة لتطوير الواجهة الأمامية.

(1) رسم تخطيطي لمكونات النظام البيئي

graph LR
    subgraph Core
        V[Vue 3 Core]
    end
    
    subgraph Official Recommendation
        R[Vue Router 4]
        P[Pinia]
        T[Vite]
    end
    
    subgraph Community Ecosystem
        E[Element Plus]
        N[Naive UI]
        U[UnoCSS]
        I[Vue I18n]
    end
    
    V --> R
    V --> P
    V --> T
    V --> E
    V --> N
    V --> U
    V --> I
    
    style V fill:#42b883,color:#fff

graph LR
    subgraph Core
        V[Vue 3 Core]
    end
    
    subgraph Official Recommendation
        R[Vue Router 4]
        P[Pinia]
        T[Vite]
    end
    
    subgraph Community Ecosystem
        E[Element Plus]
        N[Naive UI]
        U[UnoCSS]
        I[Vue I18n]
    end
    
    V --> R
    V --> P
    V --> T
    V --> E
    V --> N
    V --> U
    V --> I
    
    style V fill:#42b883,color:#fff

(2) جدول مرجعي سريع للأدوات الرئيسية

(3) مسار تعليمي شامل

Stage 1(This Tutorial Phase 1-3):Vue 3 Core + Composition API
Stage 2 (This Tutorial Phase 4): Vue Router + Pinia + Advanced API
Stage 3(This Tutorial Phase 5):Vite + Real Projects + Deployment
Advanced (Recommended Next Steps): Nuxt 3 SSR / Vitest Test / Performance Optimization

7. مثال كامل: تطبيقك الأول باستخدام Vue 3

▶ مثال: عداد «Hello Vue 3» (SFC — مكون ملف واحد)

<!-- App.vue - First Vue 3 Applications -->
<template>
  <div class="hello-vue">
    <h1>{{ greeting }}</h1>
    <p>You clicked the button <strong>{{ count }}</strong> times.</p>
    <button @click="increment">Click me</button>
    <p class="author">By {{ author }}, {{ currentYear }}</p>
  </div>
</template>

<script setup>
// Composition API + <script setup> Syntax sugar
import { ref, computed } from 'vue'

const count = ref(0)
const author = ref('Alice')

// Computed Properties:Automatic Dependency Tracking
const currentYear = computed(() => new Date().getFullYear())
const greeting = computed(() => `Hello Vue 3! Welcome, ${author.value}!`)

// Methods
function increment() {
  count.value++
}
</script>

<style scoped>
.hello-vue {
  text-align: center;
  padding: 2rem;
  font-family: system-ui, sans-serif;
}
button {
  background: #42b883;
  color: white;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}
button:hover {
  background: #35495e;
}
.author {
  color: #666;
  font-size: 0.9rem;
  margin-top: 2rem;
}
</style>

الناتج (بعد النقر على الزر):

Hello Vue 3! Welcome, Alice!

You clicked the button 5 times.

[Click me]

By Alice, 2026

▶ مثال: كيفية دمج شبكة توزيع المحتوى (CDN) (التشغيل في 5 أسطر من HTML)

<!DOCTYPE html>
<html>
<head><title>Vue 3 Hello</title></head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="count++">Clicked {{ count }} times</button>
  </div>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue
    createApp({
      setup() {
        return {
          message: ref('Hello Vue 3!'),
          count: ref(0)
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

النتيجة: افتح ملف HTML؛ ستظهر الصفحة عبارة "Hello Vue 3!" وزرًا. عند النقر على الزر، يزداد الرقم بمقدار 1.

▶ مثال: يتم تشغيل "Hello World" بنجاح في غضون 5 دقائق

# 1. Create a Project(Use create-vue Official Scaffolding)
npm create vue@latest my-vue-app
# Select: TypeScript? No, JSX? No, Router? No, Pinia? No, Vitest? No, E2E? No
cd my-vue-app
npm install

# 2. Start the development server
npm run dev
# → Local: http://localhost:5173/

# 3. Open in a browser,See Vue Default Welcome Page

▶ مثال: مخطط تتبع التقدم (5 دقائق/30 دقيقة/ساعة واحدة)

▶ مثال: 5 أخطاء شائعة (تجنبها في 5 دقائق)

❓ أسئلة شائعة

📖 ملخص

• Vue.js هو framework جافا سكريبت تقدمي أنشأه إيفان يو في عام 2014
• Vue 3 هو الإصدار الرئيسي الحالي، الذي تم إصداره في سبتمبر 2020؛ وبحلول عام 2026، سيكون قد مر على إصداره المستقر أكثر من 5 سنوات.
• انتهت مدة دعم Vue 2 (EOL) في ديسمبر 2023؛ ويجب أن تستخدم المشاريع الجديدة Vue 3
• التحسينات الرئيسية في Vue 3: الوكلاء التفاعليون، واجهة برمجة التطبيقات للتركيب (Composition API)، الدعم المتميز لـ TypeScript، تقنية «Tree-shaking»
• تُعد واجهة برمجة التطبيقات (API) الخاصة بـ«Composition» النهج الحديث الذي يوصي به فريق Vue، حيث توفر مرونة أكبر في إعادة استخدام المنطق البرمجي.
• منظومة Vue 3: Vite (البناء) + Vue Router 4 (التوجيه) + Pinia (الstatus) + Element Plus (واجهة المستخدم)
• التبني التدريجي: بدءًا من دمج شبكة توزيع المحتوى (CDN) وصولاً إلى تطبيق أحادي الصفحة (SPA) متكامل، مع التطور حسب الحاجة
• مناسب لـ: أنظمة إدارة الأعمال الصغيرة والمتوسطة (التجارة الإلكترونية/إدارة علاقات العملاء/الإدارة)، وتطبيقات المؤسسات المتوسطة الحجم

📝 تمارين

1. أسئلة أساسية (مستوى الصعوبة: ⭐)

   تفضل بزيارة الوثائق الرسمية على vuejs.org، واذكر الميزات الأساسية الثلاث لـ Vue 3، وشرح كل ميزة في جملة واحدة.

2. مسائل متقدمة (مستوى الصعوبة: ⭐⭐)

   قارن بين Vue 3 و React 18 في المجالات التالية (باستخدام جدول):

   الأبعاد	العرض 3	React 18
   حجم الحزمة	؟	؟
   منحنى التعلم	؟	؟
   مكتبة إدارة الولاية	؟	؟
   مكتبة التوجيه	؟	؟
   حصة السوق المحلية	؟	؟

3. مسألة التحدي (مستوى الصعوبة: ⭐⭐⭐)

   ابحث عن ثلاثة مشاريع حقيقية من حولك (شركتك الخاصة، أو شركة أحد أصدقائك، أو مشروع مفتوح المصدر)، وقم بتدوين الملاحظات:

   1. ما هو إطار العمل الخاص بالواجهة الأمامية الذي استخدمته؟
   2. لماذا نختار هذا الإطار؟
   3. ما هي تكلفة الانتقال إلى Vue 3؟

   اكتب تقريرًا بحثيًا من 300 حرف وانشره في قسم التعليقات.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن