تعلّم Vue 3: إطار Front-End JavaScript لبناء واجهات ويب تفاعلية

مقدمة إلى Vue 3 ولماذا يستحق التعلّم

يُعد Vue 3 واحدًا من أشهر أطر Front-End JavaScript الحديثة، لأنه يوفّر طريقة مرنة وخفيفة لبناء واجهات استخدام تفاعلية وقابلة للتوسّع. إذا كنت تبحث عن إطار يساعدك على تطوير مواقع وتطبيقات ويب بسرعة أكبر، مع تنظيم واضح للكود وسهولة في الصيانة، فإن Vue.js خيار ممتاز للمبتدئين والمحترفين على حد سواء.

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

ما هو Vue.js؟

Vue.js هو إطار عمل مخصص لبناء واجهات المستخدم والتطبيقات التفاعلية في المتصفح. يوفّر لك مجموعة أدوات جاهزة لتسهيل التعامل مع عناصر الصفحة، وربط البيانات بالواجهة، وتنظيم التطبيق في صورة مكوّنات قابلة لإعادة الاستخدام.

أهم ما يميز Vue هو أنه:

• خفيف وسريع نسبيًا مقارنة ببعض البدائل.
• مرن في التبنّي؛ يمكنك استخدامه في مشروع صغير أو تطبيق ضخم.
• يعتمد على نموذج مكوّنات واضح يساعد على تنظيم الكود.
• يسهّل الربط بين البيانات والواجهة عبر آليات مثل data binding.

لماذا يُسمّى Progressive Framework؟

يصف Vue نفسه بأنه Progressive Framework لأنه قابل للاستخدام تدريجيًا. بمعنى آخر، يمكنك البدء به لإضافة سلوك تفاعلي بسيط إلى صفحة موجودة بالفعل، ثم الانتقال لاحقًا إلى بناء تطبيق كامل باستخدام أدوات النظام البيئي الخاص به مثل Vue Router وVuex وVue CLI.

هذه الفكرة مفيدة جدًا للشركات التي تمتلك تطبيقات قديمة، إذ يمكنها تحديث الصفحات تدريجيًا بدلًا من إعادة كتابة المشروع كاملًا دفعة واحدة.

لمحة سريعة عن تطور Vue

بدأ مشروع Vue على يد Evan You عام 2013، ثم ظهرت النسخة الأولى في 2014، ولاحقًا جاءت Vue 2 مع تحسينات كبيرة ساهمت في انتشاره عالميًا. ومع إطلاق Vue 3 في 2020، دخل الإطار مرحلة أكثر نضجًا من حيث الأداء، وتحسين البنية الداخلية، ودعم أفضل للأدوات المصاحبة.

كما تطوّرت معه مكتبات مهمة مثل:

• Vue Router لإدارة المسارات.
• Vuex لإدارة الحالة العامة.
• Vue CLI لإنشاء المشاريع وإعداد بيئة التطوير.

ماذا ستتعلّم في هذا المسار العملي؟

المحتوى التعليمي يغطي أساسيات Vue 3 ثم ينقلك إلى التطبيق العملي عبر متجر إلكتروني بسيط. ومن أبرز المحاور:

• ما هو Vue.js؟
• إعداد Vue 3
• Vue JS Directives
• Events and Methods
• Components
• Component Props
• Lifecycle Hooks
• App Demo
• Adding Items to Cart
• Reuseable Components
• Vue CLI
• Vue Folder Structure
• Top Nav Styling with SASS
• Sidebar

إعداد Vue 3 لأول مرة

يمكنك البدء في تعلّم Vue 3 بطريقة بسيطة جدًا عبر تضمينه مباشرة داخل ملف HTML باستخدام CDN. هذه الطريقة مناسبة لفهم الأساسيات قبل الانتقال إلى مشاريع أكبر باستخدام Vue CLI.

في هذه المرحلة، من المهم التأكد من استخدام مكتبة Vue 3 الصحيحة، لأن هناك اختلافًا بين استيراد الإصدارات القديمة واستيراد النسخة الحديثة.

استيراد Vue 3 داخل صفحة HTML

بعد إدراج ملف المكتبة، يمكنك إنشاء تطبيق Vue وربطه بعنصر داخل الصفحة باستخدام createApp وmount.

<script src="https://unpkg.com/vue@next"></script>

<div id="app"></div>

<script>
const app = Vue.createApp({
  data() {
    return {
      greeting: 'Hello Vue 3!'
    }
  }
})

app.mount('#app')
</script>

بهذه الخطوات البسيطة يصبح لديك تطبيق Vue جاهز لعرض البيانات وربطها بالواجهة.

ربط البيانات بالواجهة في Vue 3

من أبرز مزايا Vue سهولة عرض المتغيرات داخل القالب باستخدام الصيغة المعروفة باسم double curly braces:

<div id="app">
  {{ greeting }}
</div>

سيقوم Vue بقراءة المتغير greeting من كائن data وعرض قيمته في الصفحة.

فهم Vue JS Directives

تُستخدم Directives لربط عناصر HTML بمنطق Vue. وهي تشبه خصائص HTML العادية، لكن تبدأ غالبًا بالبادئة v-.

استخدام v-model

تتيح v-model تنفيذ two-way data binding بين حقل الإدخال والمتغير المرتبط به.

<input v-model="greeting" />
<p>{{ greeting }}</p>

عند تغيير النص داخل الحقل، ستتغير قيمة المتغير مباشرة، والعكس صحيح.

التحكم في الظهور باستخدام v-if وv-show

عندما تحتاج إلى عرض عنصر أو إخفائه بناءً على شرط منطقي، يمكنك استخدام:

• v-if: يضيف العنصر إلى DOM أو يزيله بالكامل.
• v-show: يُبقي العنصر داخل DOM لكنه يغيّر خاصية العرض عبر CSS.

<div v-if="isVisible" class="box"></div>

هذه النقطة مهمة عمليًا: إذا كان العنصر سيظهر ويختفي بكثرة، فقد يكون v-show أكثر مناسبة. أما إذا كان ظهوره مشروطًا منطقيًا ونادر التبدّل، فغالبًا v-if هو الخيار الأفضل.

سلاسل الشروط: v-else-if وv-else

يدعم Vue كتابة شروط متسلسلة بشكل مشابه لـ JavaScript:

<div v-if="isVisible">First</div>
<div v-else-if="isVisibleTwo">Second</div>
<div v-else>Third</div>

حل مشكلة الوميض الأولي باستخدام v-cloak

أحيانًا تظهر القوالب أو الأقواس المزدوجة للحظة قبل أن ينتهي Vue من تحميل التطبيق. لحل هذه المشكلة يمكنك استخدام v-cloak مع CSS بسيط:

[v-cloak] {
  display: none;
}

<div id="app" v-cloak>
  {{ greeting }}
</div>

الأحداث والدوال في Vue 3

بعد فهم عرض البيانات وربطها، تأتي مرحلة التفاعل مع المستخدم. وهنا يظهر دور Events and Methods.

التعامل مع النقر باستخدام v-on أو @

يمكنك الاستماع إلى أحداث المتصفح مثل النقر على زر باستخدام v-on أو الصيغة المختصرة @.

<button @click="toggleBox">Toggle Box</button>

const app = Vue.createApp({
  data() {
    return {
      isVisible: false
    }
  },
  methods: {
    toggleBox() {
      this.isVisible = !this.isVisible
    }
  }
})

هنا يتم عكس قيمة isVisible كلما ضغط المستخدم على الزر.

التعامل مع لوحة المفاتيح

يتيح Vue الاستماع إلى أحداث المفاتيح مع modifiers جاهزة مثل .enter:

<input @keyup.enter="greet" v-model="greeting" />

methods: {
  greet() {
    console.log(this.greeting)
  }
}

هذه الطريقة مفيدة في نماذج الإدخال وحقول البحث والنماذج السريعة.

تمرير القيم إلى الدوال

يمكنك أيضًا تمرير قيم مخصصة أثناء استدعاء الدالة من القالب:

<input @keyup.enter="greet(greeting)" v-model="greeting" />

methods: {
  greet(greeting) {
    console.log(greeting)
  }
}

Event Modifiers في Vue

يقدّم Vue مجموعة مفيدة من modifiers لتبسيط التعامل مع الأحداث، مثل:

• .prevent لمنع السلوك الافتراضي.
• .stop لإيقاف انتشار الحدث.
• .right للاستجابة للنقر بزر الفأرة الأيمن.

<form @submit.prevent="handleSubmit"></form>

المكوّنات في Vue 3

تعتمد فلسفة Vue بشكل أساسي على Components، أي تقسيم الواجهة إلى وحدات صغيرة مستقلة يسهل إعادة استخدامها وصيانتها.

على سبيل المثال، بدلًا من كتابة نموذج تسجيل دخول كامل داخل ملف واحد، يمكنك تقسيمه إلى:

• مكوّن رئيسي للنموذج.
• مكوّن فرعي لحقل الإدخال.
• مكوّنات إضافية للأزرار أو الرسائل أو التنبيهات.

إنشاء مكوّن مخصص

app.component('custom-form', {
  template: `
    <form>
      <input type="email" />
      <input type="password" />
    </form>
  `
})

بعد تسجيل المكوّن، يمكنك استخدامه داخل القالب كأنه وسم HTML جديد.

تمرير البيانات عبر Props

عندما يكون لديك مكوّن أب وآخر ابن، يمكنك إرسال البيانات من الأب إلى الابن باستخدام props. هذه الآلية أساسية جدًا في بناء الواجهات المنظمة.

app.component('custom-input', {
  props: ['label'],
  template: `
    <label>
      {{ label }}
      <input type="text" />
    </label>
  `
})

<custom-input :label="emailLabel" />

لاحظ هنا استخدام v-bind أو الصيغة المختصرة : لتمرير متغير JavaScript بدلًا من نص ثابت.

مهم: Props للقراءة فقط

من القواعد المهمة في Vue أن props لا يجب تعديلها مباشرة داخل المكوّن الابن. إذا أردت تحديث قيمة قادمة من الأب، فعادةً تحتاج إلى إطلاق حدث emit وإبلاغ المكوّن الأب بالتغيير.

استخدام v-model مع المكوّنات المخصصة

يمكن بناء مكوّنات إدخال قابلة لإعادة الاستخدام تدعم v-model، لكن ذلك يتطلب فهمًا جيدًا لـ modelValue وحدث update:modelValue في Vue 3.

props: ['modelValue'],
computed: {
  inputValue: {
    get() {
      return this.modelValue
    },
    set(value) {
      this.$emit('update:modelValue', value)
    }
  }
}

<input v-model="inputValue" />

هذا النمط عملي جدًا في بناء حقول مرنة وقابلة لإعادة الاستخدام داخل النماذج الكبيرة.

الحلقات في Vue باستخدام v-for

عند الحاجة إلى عرض مجموعة من العناصر ديناميكيًا، يوفر Vue التوجيه v-for.

<p v-for="item in items" :key="item">
  {{ item }}
</p>

ويُفضّل دائمًا استخدام key فريد لكل عنصر داخل الحلقة لتحسين الأداء وتقليل الأخطاء أثناء إعادة التصيير.

يمكن أيضًا استخدام v-for مع المكوّنات، وهو ما يحدث كثيرًا في بطاقات المنتجات، أو عناصر القوائم، أو نتائج البحث.

Lifecycle Hooks في Vue 3

لكل مكوّن في Vue دورة حياة تبدأ من إنشائه وتنتهي بإزالته من الصفحة. خلال هذه الدورة، يتيح Vue ما يُعرف باسم Lifecycle Hooks لتشغيل وظائف محددة في لحظات معينة.

أشهر Lifecycle Hooks

• created: بعد إنشاء المكوّن وتجهيز بياناته.
• mounted: بعد إضافته إلى DOM.
• updated: بعد تحديث البيانات وإعادة التصيير.
• beforeUnmount: قبل إزالة المكوّن من الصفحة.
• unmounted: بعد إزالة المكوّن.

mounted() {
  console.log('Component mounted')
}

تُستخدم هذه الخطافات في حالات كثيرة، مثل:

• جلب البيانات من API.
• تشغيل أو إيقاف أحداث مخصصة.
• التحقق من الصلاحيات قبل عرض المحتوى.
• تنظيف الموارد عند إزالة المكوّن.

بناء تطبيق متجر بسيط باستخدام Vue 3

بعد تغطية المفاهيم الأساسية، ينتقل المسار إلى بناء تطبيق متجر بسيط. الفكرة التعليمية هنا ذكية: تبدأ من واجهة HTML وCSS جاهزة، ثم تضيف إليها منطق Vue تدريجيًا حتى تتحول إلى تطبيق تفاعلي.

ما الذي يتضمنه التطبيق؟

• عرض منتجات متعددة.
• تحديد الكمية.
• إضافة المنتجات إلى السلة.
• إظهار Sidebar للسلة.
• تحديث الإجمالي تلقائيًا.
• إزالة العناصر من السلة.
• إعادة استخدام المكوّنات بدل تكرار الكود.

الانتقال من HTML بسيط إلى Vue CLI

في البداية، يمكن تجربة Vue داخل ملف HTML واحد. لكن مع نمو المشروع، تصبح هذه الطريقة محدودة. وهنا تظهر أهمية Vue CLI لإنشاء تطبيق منظم وقابل للتوسع.

لماذا Vue CLI مهم؟

• يبني هيكل مشروع احترافي جاهز.
• يهيئ أدوات التطوير تلقائيًا.
• يسهّل العمل مع Webpack وBabel.
• يساعد على إدارة الملفات والمكوّنات والمسارات.
• يتيح استخدام SASS وVue Router وVuex.

إنشاء مشروع جديد باستخدام Vue CLI

vue create product-and-cart

بعدها يمكنك اختيار الإعدادات التي تناسب مشروعك، مثل:

• الإصدار: Vue 3
• Babel
• Vue Router
• Vuex
• SASS
• ESLint

هيكل ملفات مشروع Vue

عند إنشاء المشروع، ستجد بنية واضحة ومنظمة. من أبرز الملفات والمجلدات:

إدارة التنقل باستخدام Vue Router

في التطبيقات متعددة الواجهات، تحتاج إلى نظام تنقل داخلي. هنا يأتي دور Vue Router الذي يمكّنك من التنقل بين الصفحات دون إعادة تحميل كاملة للمتصفح.

<router-link to="/products">Products</router-link>
<router-view />

يعمل router-link كرابط داخلي، بينما يحدد router-view المكان الذي ستُعرض فيه الصفحة المرتبطة بالمسار الحالي.

إعادة استخدام المكوّنات في التطبيق العملي

من أهم المكاسب التقنية في Vue هي القدرة على تحويل أجزاء الواجهة المتكررة إلى مكوّنات مستقلة. مثال واضح على ذلك:

• تحويل بطاقة المنتج إلى مكوّن ProductCard.
• تحويل سلة المشتريات الجانبية إلى مكوّن Sidebar.
• استخدام هذه المكوّنات في أكثر من صفحة دون تكرار الكود.

هذه الممارسة تقلّل التعقيد، وتزيد قابلية الاختبار، وتجعل تطوير الميزات الجديدة أسرع بكثير.

استخدام SASS لتحسين تنظيم التنسيقات

في المشاريع العملية، يفضّل كثير من المطورين استخدام SASS بدل CSS التقليدي، لأنه يسمح بتقسيم التنسيقات إلى ملفات منطقية، واستعمال المتغيرات، وتسهيل إعادة الاستخدام.

دمج SASS مع Vue CLI يجعل إدارة الواجهة أكثر احترافية، خصوصًا في التطبيقات التي تحتوي على صفحات متعددة ومكوّنات كثيرة.

متى يصبح Vue 3 خيارًا مناسبًا لك؟

اختر Vue 3 إذا كنت تبحث عن:

• منحنى تعلم مريح نسبيًا.
• بنية واضحة تعتمد على المكوّنات.
• حل مرن لمشروع صغير أو متوسط أو حتى كبير.
• سهولة دمجه في مشروع قائم مسبقًا.
• أداء جيد وتجربة تطوير سلسة.

كما أنه مناسب جدًا لمن يريد الانتقال من JavaScript التقليدية إلى بناء تطبيقات أكثر تنظيمًا وحداثة.

أفضل طريقة لتعلّم Vue 3 بفعالية

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

1. إنشاء تطبيق بسيط بملف HTML واحد.
2. ربط البيانات بالواجهة باستخدام v-model.
3. إدارة الظهور والإخفاء عبر v-if وv-show.
4. بناء مكوّنات صغيرة قابلة لإعادة الاستخدام.
5. استخدام props وemit لنقل البيانات.
6. تجربة Vue CLI لإنشاء مشروع كامل.

كلما بنيت مشروعًا فعليًا، أصبحت مفاهيم Vue أوضح وأكثر رسوخًا.

الخلاصة التقنية

Vue 3 ليس مجرد إطار سهل البداية، بل منظومة متكاملة تمنحك توازنًا ممتازًا بين البساطة والقوة. من الناحية التقنية، ما يجعله مميزًا فعلًا هو سهولة التدرج: يمكنك البدء بسطرين داخل صفحة HTML، ثم الانتقال لاحقًا إلى بنية احترافية باستخدام Vue CLI وVue Router وVuex. إذا كنت مطور Front-End أو تتجه لبناء تطبيقات تفاعلية حديثة، فإن إتقان Vue 3 استثمار عملي وذكي في مسارك التقني.