كيفية الترقية من Vue 2 إلى Vue 3 عبر مشروع تطبيقي بسيط

مقدمة: لماذا يجب التفكير في الترقية إلى Vue 3؟

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

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

ما الذي ستتعلمه في هذا الدليل؟

يركز هذا المقال على تقديم شرح عربي احترافي ومبسط لكيفية نقل مشروع بسيط من Vue 2 إلى Vue 3 باستخدام روابط CDN، مع توضيح التغييرات الأساسية في Vue Router 4. الفكرة هنا ليست فقط تطبيق الخطوات، بل فهم سبب كل تعديل حتى تتمكن لاحقاً من تنفيذ الترقية على مشاريع أكبر وأكثر تعقيداً.

• فهم أبرز التغييرات في Vue 3.
• التعرف على التعديلات المهمة في Vue Router 4.
• تحديث بنية إنشاء التطبيق وربطه بالراوتر.
• تعديل روابط CDN بما يتوافق مع الإصدارات الجديدة.
• تنفيذ ترحيل عملي على مشروع بسيط خطوة بخطوة.

نظرة عامة على أبرز التغييرات في Vue 3

قدمت Vue 3 تحسينات ملحوظة، لكنها في المقابل غيرت بعض الأساليب التي كانت شائعة في Vue 2. لهذا السبب، فإن أي مشروع يراد نقله إلى الإصدار الجديد يجب أن يُراجع بعناية، خصوصاً إذا كان يعتمد على المكونات، أو التوجيه، أو بعض واجهات API القديمة.

أهم فئات التغييرات الكاسرة

• الواجهة العامة العالمية: وهي التغييرات المرتبطة بطريقة عمل Vue نفسها وإنشاء التطبيق.
• توجيهات القوالب: مثل اختلاف أولوية v-if وv-for.
• المكونات: تغييرات في تعريف المكونات وإدارة الأحداث.
• دوال التصيير: تخص من ينشئ عناصر HTML برمجياً.
• العناصر المخصصة: لتكامل أفضل مع عناصر الويب المخصصة.
• تغييرات طفيفة: قد لا تؤثر على كل مشروع، لكنها جديرة بالمراجعة.
• واجهات محذوفة: بعض الأساليب القديمة لم تعد متاحة في Vue 3.

بالنسبة لمعظم المشاريع، فإن أكثر النقاط تأثيراً ستكون: طريقة إنشاء التطبيق، أسلوب تعريف البيانات داخل المكون الجذري، تحديث تعريف المكونات، بالإضافة إلى التغيرات المرتبطة بـ Vue Router.

إنشاء التطبيق في Vue 3 باستخدام createApp()

في Vue 2 كان إنشاء التطبيق يتم عادة عبر new Vue()، أما في Vue 3 فقد أصبح الأسلوب الجديد يعتمد على Vue.createApp(). هذا التغيير أساسي جداً، لأنه يؤثر في بنية تهيئة المشروع منذ البداية.

عنصر الجذر داخل ملف index.html لا يتغير غالباً، ويظل بالشكل التالي:

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

لكن الاختلاف الحقيقي يظهر في ملف JavaScript:

// Vue 3 syntax
const app = Vue.createApp({
  // options object
})

app.mount('#app')

// Vue 2 syntax
const app = new Vue({
  // options object
  el: '#app'
})

لاحظ هنا أن عملية الربط بعنصر الصفحة لم تعد تتم عبر الخاصية el، بل عبر الدالة app.mount() بعد إنشاء التطبيق.

تعريف المكونات في Vue 3

في الإصدارات السابقة، كان من الشائع تسجيل المكونات بشكل عام باستخدام Vue.component(). أما في Vue 3، فأصبح تسجيل المكون يتم انطلاقاً من كائن التطبيق نفسه.

/* Vue 3 syntax */
const app = Vue.createApp({
  // options here
})

app.component('component-name', {
  // component code here
})

/* Vue 2 syntax */
Vue.component('component-name', {
  // component code here
})

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

التعامل مع data() في المكون الجذري

من التغييرات المهمة أيضاً أن خاصية data في المكون الجذري لم تعد تُكتب ككائن مباشر في Vue 3. بل يجب تعريفها كدالة تُعيد كائناً، تماماً كما هو الحال في المكونات الفرعية.

// Vue 3
const app = Vue.createApp({
  data() {
    return {
      message: 'hi there'
    }
  }
})

app.mount('#app')

// Vue 2 syntax
const app = new Vue({
  el: '#app',
  data: {
    message: 'hi there'
  }
})

هذه النقطة تبدو صغيرة، لكنها أساسية لتجنب الأخطاء بعد الترقية.

تغير أولوية v-if وv-for

إذا كنت تستخدم v-if وv-for على العنصر نفسه، فيجب الانتباه إلى أن أولوية التنفيذ تغيرت في Vue 3. في Vue 2 كانت الأولوية لـ v-for، أما الآن فأصبحت الأولوية لـ v-if.

عملياً، يُفضل تجنب الجمع بين التوجيهين على نفس العنصر من الأصل، لأن ذلك قد يربك منطق القالب ويؤدي إلى نتائج غير متوقعة. إذا كان لديك مشروع كبير، فافحص هذه المواضع بدقة قبل الترقية.

خاصية emits في المكونات

أضافت Vue 3 خاصية جديدة ومفيدة باسم emits، وهي مشابهة لفكرة props، لكن وظيفتها هي التصريح بالأحداث التي يمكن للمكون إرسالها إلى المكون الأب.

هذا الأسلوب مفيد جداً في ضبط الأحداث ومنع الإطلاق المكرر لبعض الأحداث الأصلية مثل click.

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>

<script>
export default {
  props: ['text'],
  emits: ['accepted']
}
</script>

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

ما الجديد في Vue Router 4؟

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

أهم التعديلات في Vue Router 4

• تغيرت طريقة إنشاء كائن الراوتر.
• أصبحت خاصية history إلزامية.
• لم يعد الأسلوب القديم لحقن الراوتر في التطبيق هو الأنسب.

طريقة إنشاء الراوتر في الإصدار الجديد

في Vue Router 3 كان إنشاء الراوتر يتم عبر new VueRouter()، أما الآن فيتم باستخدام VueRouter.createRouter().

// Vue Router 3
const router = new VueRouter({
  routes
})

const app = new Vue({ router }).$mount('#app')

أما في Vue Router 4، فأصبح الشكل الصحيح كالتالي:

// Vue Router 4
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
})

const app = Vue.createApp({})
app.use(router)
app.mount('#app')

النقطة الأهم هنا هي أن الخاصية history لم تعد اختيارية. إذا لم تُعرّفها، فستظهر لك أخطاء في وحدة التحكم console، ولن يعمل التطبيق بالشكل المتوقع.

الترحيل العملي لمشروع من Vue 2 إلى Vue 3

بعد فهم الأساسيات، حان وقت التطبيق. سنفترض هنا أن لدينا مشروع معرض أعمال بسيطاً يعتمد على Vue وVue Router باستخدام روابط CDN. الترقية ستشمل أربع مراحل رئيسية:

1. استنساخ المشروع.
2. تحديث روابط CDN.
3. تحديث كائن تطبيق Vue.
4. تحديث كائن Vue Router.

1) استنساخ المستودع

ابدأ أولاً بجلب المشروع إلى جهازك:

git clone https://bitbucket.org/fbhood/vue-folio/src/master/ vue-folio

بعد تنزيل الملفات، افتح المشروع داخل محرر الشيفرة المفضل لديك.

2) تحديث روابط CDN

إذا كان المشروع يعمل عبر الربط المباشر بمكتبات Vue وVue Router من خلال CDN، فهذه أول نقطة يجب تحديثها داخل ملف index.html.

استبدل الروابط القديمة التالية:

<!-- VueJS 3 production version -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

<!-- Vue Router -->
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>

بالروابط الجديدة:

<!-- VueJS 3 -->
<script src="https://unpkg.com/vue@3"></script>

<!-- Vue Router -->
<script src="https://unpkg.com/vue-router@4"></script>

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

3) فهم الأخطاء بعد التحديث

عند تشغيل المشروع بعد تحديث الروابط فقط، ستلاحظ غالباً أن الواجهة لا تظهر، وستجد رسائل خطأ داخل console مشابهة لما يلي:

You are running a development build of Vue. Make sure to use the production build (*.prod.js) when deploying for production.
Uncaught TypeError: window.Vue.use is not a function
Uncaught ReferenceError: VueRouter is not defined

سبب هذه الأخطاء أن طريقة استخدام Vue وVue Router تغيرت بين الإصدارين، وبالتالي لا يمكن الاعتماد على الصياغة القديمة بعد الآن.

4) تحديث كائن التطبيق الرئيسي

داخل ملف main.js، ستجد في المشاريع القديمة كوداً يشبه التالي:

// create and mount the Vue instance
const app = new Vue({ router }).$mount('#app')

في Vue 3 يجب تعديله إلى:

// create and mount the Vue instance
const app = Vue.createApp({ router })
app.mount('#app')

لكن بما أن المشروع يستخدم Vue Router، فهذه ليست الصياغة النهائية بعد. ما زال علينا تحديث طريقة إنشاء الراوتر وربطه بالتطبيق.

5) تحديث كائن Vue Router

إذا كان الكود الحالي يحتوي على الصياغة التالية:

// create the router instance
const router = new VueRouter({ routes })

فيجب استبدالها بهذه الصياغة الحديثة:

// create the router instance
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
})

التغييران الجوهريان هنا هما:

• استبدال new VueRouter() بـ VueRouter.createRouter().
• إضافة الخاصية الإلزامية history بدلاً من الاعتماد على الأسلوب القديم المرتبط بـ mode.

6) ربط الراوتر بالتطبيق بالشكل الصحيح

بعد إنشاء الراوتر وفق الصياغة الجديدة، يجب إخبار التطبيق بأنه سيستخدم هذا الراوتر. في Vue 3 يتم ذلك عبر app.use().

بدلاً من هذا الكود:

// create and mount the Vue instance
const app = Vue.createApp({ router })
app.mount('#app')

استخدم الصياغة الصحيحة التالية:

// create and mount the Vue instance
const app = Vue.createApp({})
app.use(router)
app.mount('#app')

بهذه الخطوة يصبح التطبيق واعياً بوجود Vue Router ويستطيع التعامل مع التنقل بين الصفحات والمكونات كما ينبغي.

ملخص سريع لأهم الفروقات بين Vue 2 وVue 3

نصائح مهمة قبل ترقية أي مشروع حقيقي

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

• راجع سجل التغييرات الرسمي لكل مكتبة تعتمد عليها.
• ابدأ أولاً بمشروع تجريبي أو فرع منفصل من المستودع.
• اختبر المكونات التي تتعامل مع الأحداث والخصائص بشكل مكثف.
• افحص القوالب التي تستخدم v-if وv-for على العنصر نفسه.
• تأكد من توافق الإضافات الخارجية مع Vue 3.
• استخدم بيئة اختبار قبل نشر أي تحديث على الإنتاج Production.

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

الانتقال من Vue 2 إلى Vue 3 ليس معقداً في المشاريع الصغيرة، لكنه يتطلب فهماً دقيقاً للتغييرات الأساسية، خاصة في إنشاء التطبيق وربط Vue Router. من الناحية التقنية، أهم ما يجب الانتباه إليه هو الانتقال إلى createApp()، وتعريف data() بشكل صحيح، واعتماد VueRouter.createRouter() مع الخاصية history. إذا خططت للترقية جيداً وراجعت التغييرات الكاسرة بعناية، فستكون عملية النقل أكثر سلاسة وأقل عرضة للأخطاء.