من مكتبة جافا سكريبت إلى إطار عمل ، رحلة Vue مثيرة للإعجاب ، خاصة عندما تفكر في كيفية استمرارها في الحفاظ على طبيعتها خفيفة الوزن. هناك العديد من الميزات التي يقدمها Vue3 ، بما في ذلك Pinia ، والتي تتيح إدارة أسهل للحالة ، بالإضافة إلى إنشاء سلسلة أدوات تعمل على Vite. سواء كنت ترغب في تحديث تطبيقاتك إلى Vue3 أو تريد ببساطة تجربة إطار العمل ، قمنا بتجميع كل ما تحتاج لمعرفته حول Vue3 هنا!
ما هو Vue3؟
قبل أن ندخل في التغييرات التي ستراها في Vue3 ، دعنا أولاً نلقي نظرة على ماهية Vue.js ومكوناته الأساسية:
Vue
Vue.js هو إطار عمل JavaScript مفتوح المصدر للواجهة الأمامية يمكن استخدامه لإنشاء واجهات مستخدم. يقدم إطار العمل نهج ترميز تعريفي وقائم على المكونات يساعد في التطوير السريع لشاشات المستخدم. يمكن استخدامه لتطوير واجهات أساسية أو معقدة ومبني على مستوى الصناعة HTML و CSS و JavaScript. أسباب شعبية Vue.js وقاعدة المستخدمين الكبيرة لـ Vue.js هي تركيبها المألوف للمبرمجين وسهولة الاستخدام والتوثيق المحدد جيدًا.
كما ذكرنا سابقًا ، تم بناء Vue.js على خاصيتين أساسيتين:
يُمكِّن العرض التعريفي المستخدم من تحديد مخرجات HTML بشكل تصريحي اعتمادًا على حالة JavaScript. يتوسع Vue.js في HTML العادي بمساعدة بناء جملة النموذج.
التفاعلية - يقوم Vue.js بمراقبة حالة JavaScript بفاعلية ، وعندما يتم تعديلها ، يقوم بتحديث DOM بسرعة.
Vue3.0
يحتاج المهندسون الذين يستخدمون Vue 2 للترميز الآن إلى التحديث إلى Vue3. هذا لأنه يحتوي على إمكانات جديدة تجعل تصميم مكونات قابلة للقراءة ومتسقة أسهل بكثير وأفضل طرق لتنظيم تطبيقاتنا. يعد Vue3 أكثر سهولة في الاستخدام وقصرًا وأسهل في الصيانة. بعض الميزات البارزة لـ Vue3 هي Teleport و Fragments ونماذج v متعددة.
تخلص الإصدار الأخير أيضًا من المرشحات ولديه متغيرات CSS مدفوعة بالحالة بالإضافة إلى ميزة تعليق تجريبية. كما أن لديها تعديلات تسمية لدورة الحياة وتعديلات في مكون الملف الفردي.
هل تم إطلاق Vue3؟
تم الإعلان عن الإصدار الأخير من Vue المتاح - Vue3 ، مبدئيًا في منتصف عام 2018 وتم إصداره رسميًا في سبتمبر 2020. تم الإعلان عن Vue3.0 كإصدار افتراضي رسمي لإطار عمل جافا سكريبت التقدمي في 7 فبراير 2022.
ما الجديد في Vue3؟
التغييرات الأكثر إثارة التي نتطلع إليها في Vue3 هي:
تقديم / حقن
يسمح Vue 2 للمستخدمين بتمرير البيانات مثل السلاسل والمصفوفات والكائنات والمزيد من خلال الدعائم في التعليمات البرمجية. يمكن تمرير هذه البيانات بسهولة من العنصر الأصل إلى العناصر التابعة له. ومع ذلك ، فإن استخدام الخاصيات جعل إرسال البيانات من العنصر الأصل إلى عنصر فرعي متداخل بعمق أكثر صعوبة. نتيجة لذلك ، كان على المطورين استخدام Vuex Store و Event Hub. تضمن Vue 2.2.0 أيضًا توفير / حقن ، ولكن لم يُنصح باستخدامه في الكود العام للبرنامج.
ومع ذلك ، باستخدام مجموعة التحرير / الحقن المحسّنة في Vue3 ، يمكننا تمرير البيانات بسرعة ودقة أكبر. كما يوحي الاسم ، نستخدم لتوفير إمكانية الوصول إلى البيانات من عنصر أصلي إلى أي من مكوناته الفرعية ، بغض النظر عن مدى عمق هذه العناصر الفرعية. هنا ، يمكننا استخدام التزويد ككائنات أو كوظائف.
النقل الفضائي
استنادًا إلى منطق التطبيق الذي تريد إنشاءه ، قد تظهر مكوناتك في أماكن مختلفة عن المكان الذي تريد عرضها فيه. على سبيل المثال ، قد ترغب في إنشاء نافذة منبثقة من المفترض أن تظهر وتحتل الشاشة بأكملها. للتغلب على هذا ، يمكننا استخدام سمة الموضع لمثل هذه المكونات في CSS ، ولكن مع Vue3 ، يمكن للمطورين أيضًا استخدام Teleport.
يسمح النقل الفوري للمبرمجين بأخذ عنصر من الحاوية الأولية الخاصة به والذي يتم لفه فيه ونقله إلى أي مكون موجود بالفعل على الصفحة حيث يتم استخدامه. على سبيل المثال ، يمكنك إعادة تحديد موضع عنصر رأس من #app div إلى الرأس. تذكر أنه يمكنك فقط استخدام النقل الآني لنقل العناصر إلى مكونات الكود الموجودة خارج Vue DOM.
فتات
من الصعب أن يكون لديك العديد من مكونات الجذر في قالب الملف في Vue 2. بدأ المبرمجون في تضمين جميع المكونات في المكون الرئيسي كحل لنفسها. في بعض الأحيان ، قد يحتاج المبرمجون إلى عرض عنصر بدون حاوية ملفوفة حوله. يمكن للمهندسين الآن الحصول على العديد من العناصر في ملف القالب الجذر الخاص بهم بفضل Fragments ، وهي ميزة مضافة إلى Vue3.
Global Vue API
كان من الممكن أن تجد Vue.component أو Vue.use بشكل متكرر في ملف main.js لتطبيق Vue. يشار إليها باسم واجهات برمجة التطبيقات العالمية ، وهناك العديد من هذه الأساليب في Vue 2. هنا إذا كان لديك مثيلات متعددة من تطبيقك ، يتم وضعها جميعًا فوق Vue. من الصعب تقييد وظيفة معينة بطبعة تطبيق واحدة.
يحل Vue3 هذه المشكلة عن طريق تقديم واجهة برمجة تطبيقات عالمية جديدة تسمى createApp. باستخدام هذه الطريقة ، يمكنك الحصول على نسخة جديدة من تطبيق Vue. سيتم نقل جميع واجهات برمجة التطبيقات المتعلقة بـ Vue 2.x إلى مثيلات تطبيق منفصلة. يسمح هذا لكل مثيل من تطبيقك أن يكون له وظائف خاصة به دون تعطيل المثيلات الأخرى المستخدمة بالفعل.
أحداث API
بالإضافة إلى استخدام Vuex Store ، يعد استخدام Event Bus أحد أكثر الطرق شيوعًا التي استخدمها المبرمجون لتمرير البيانات بين العناصر التي لا تشارك سياق الوالدين والطفل. ومع ذلك ، تم حذف الرموز مثل $ on و $ off و $ مرة واحدة في Vue3. ولكن لا يزال من الممكن الوصول إلى $ emit حيث يجب على العناصر الفرعية إرسال الأحداث إلى العناصر الأصلية. سيكون حل هذا هو استخدام الحقن / التقديم.
سلسلة أدوات البناء المدعومة من Vite
تم تصميم Vite بواسطة Evan You ، مبتكر Vue ، وهو عبارة عن سلسلة أدوات دعم Vue SFC من الدرجة الأولى وخفيفة الوزن وسريعة الإنشاء. يعد Vite الآن المحرك وراء التكوين القياسي لبناء Vue3. ستعمل حزمة الوحدة النمطية @ vue-cli / service ، المبنية على حزمة الويب ، على التفاف تطبيق Vue بالكامل عند التشغيل وإعادة التحميل السريع والتجميع. من ناحية أخرى ، سيأخذ Vite بناء جملة استيراد ES من كود البرنامج الخاص بك ويسمح للمتصفح بتحليل كل استيراد قبل إرسال طلب HTTP.
يتم إجراء التغيير في المقام الأول لأسباب السرعة. يبدأ الخادم على الفور لأنه يستخدم دعم المستعرض الأصلي لمكونات JavaScript وهو أسرع بكثير.
تركيب تركيب API
تم استخدام API للخيارات لإنشاء حالات العنصر والمنطق. تم إطلاق Composition API بواسطة Vue3 كبديل لنفسه. إنها مجرد مجموعة من واجهات برمجة التطبيقات التي تمكننا من إنشاء عناصر Vue دون تحديد الخيارات باستخدام الأساليب المستوردة.
تحتوي واجهة برمجة تطبيقات التكوين على واجهات برمجة التطبيقات التالية:
التفاعلية API - على سبيل المثال ، المرجع () ورد الفعل (). يمكنه مباشرة بناء حالة رد الفعل والحالة المحسوبة والمراقبين باستخدام هذا.
خطافات دورة الحياة - على سبيل المثال ، onMounted () و onUnmounted (). يمكننا ربط دورة حياة العنصر باستخدام خطافات دورة الحياة.
حقن التبعية - على سبيل المثال ، قدم () وحقن (). أصبح استخدام نظام حقن التبعية في Vue مع واجهات برمجة التطبيقات التفاعلية ممكنًا عن طريق حقن التبعية.
إيجابيات استخدام تكوين واجهات برمجة التطبيقات
المزايا الرئيسية لاستخدام Composition APIs على Options API هي:
- لم يعد العنصر ضروريًا مع Vue3 لإنشاء حالة تفاعلية.
- عند إضافة العديد من السمات التفاعلية ، يمكن أن يتضخم الإعداد في عناصر Vue.js. قد يكون من المفيد أن يتم تلخيص هذه المتغيرات التفاعلية في ملفات جافا سكريبت منفصلة بسبب هذا.
- الفائدة الرئيسية من Composition API هي أنها تجعل من الممكن إعادة استخدام منطق واضح وفعال في شكل طرق Composable. إنه يعالج جميع المشكلات المتعلقة بـ mixins ، وهي الطريقة الرئيسية لإعادة استخدام المنطق في Options API.
- يمكنك كتابة التعليمات البرمجية في Composition API مع استدلال النوع الكامل.
- تكون البرامج التي تكتبها في Composition API أكثر كفاءة ، ويمكن تصغير أسماء المتغيرات. هذا يقلل من الحمل.
- يمكنك مشاركة كود البرنامج بشكل أفضل مع Composition API.
بينيا
Pinia هي أداة إدارة حالة خفيفة الوزن لـ Vue.js. تمكننا من مشاركة الحالة بين العناصر والصفحات. إنه ينشئ إطارًا لإدارة الحالة سهل الاستخدام ومكتوب بالكامل باستخدام مفهوم التفاعل الجديد في Vue3. هذه هي مكتبة التحكم القياسية الجديدة في Vue3 الآن.
خدم Pinia في البداية كدراسة حول إمكانات Vuex. لفترة طويلة ، كان Vuex هو نظام إدارة الحالة المقترح لـ Vue ، ولكن مع Vue3 ، يعد Pinia النظام الموصى به لإدارة الحالات في الوثائق الرسمية. حاليًا ، Vuex في وضع الصيانة. على الرغم من استمراره في العمل ، لن تتم إضافة أي ميزات جديدة. يُنصح باستخدام Pinia للتطبيقات الحديثة.
لماذا بينيا؟
بينيا خفيف الوزن للغاية ، يصل إلى 1 كيلو بايت فقط. بالإضافة إلى ذلك ، يتكامل مع أدوات التطوير Vue.js لتحسين تجربة الترميز في Vue 2 و Vue3. نظرًا لأن Pinia يستنتج جميع أنواع البيانات الخاصة بك ، فإنه يمكن أن يوفر لك إكمال تلقائي كامل ودقيق في جافا سكريبت أيضًا. Pinia أيضًا معياري حسب التصميم ، وسهل الاستخدام ، وقابل للتوسيع. بشكل عام ، يبدو أن Pinia خفيف الوزن وغير معقد ومباشر. إنه يشبه إلى حد كبير التعامل مع العناصر ويحتوي على جميع الأدوات اللازمة للبرمجة الديناميكية في Vue3.
هل سيتم إهمال Vue 2؟
آخر تحديث ثانوي لـ Vue 2 كان Vue 2.7 ، والذي تم إصداره في يوليو 2022. Vue 2 حاليًا في وضع الصيانة. على الرغم من أنه لن يتم شحن أي ميزات إضافية ، إلا أنه سيستمر في الحصول على إصلاحات أخطاء مهمة وتصحيحات أمان لمدة 18 شهرًا. بحلول نهاية عام 2023 ، سيتم إهمال Vue 2.
الهجرة من Vue 2
استنادًا إلى برنامجك ، قد لا يكون التبديل إلى Vue3 مفيدًا إذا كنت تعمل في مشروع كبير للغاية باستخدام Vue 2. استخدم Vue3 إذا استمرت مشكلات الكفاءة على الرغم من بذل قصارى جهدك في التحسين.
يعتمد ما إذا كنت تريد ترحيل تطبيقك إلى Vue3 أم لا على حجمه وتعقيده. غالبية البنية والتقنيات في Vue 2 هي نفسها كما في Vue3. ومع ذلك ، إذا كنت تريد استخدام بعض التغييرات المذكورة أعلاه ، فسيكون الترحيل فكرة أفضل.
Vue.js في مشروع AppMaster
تستخدم منصة AppMaster إطار عمل VueJS ، أو بالأحرى الإصدار الثالث من إطار العمل ، لإنشاء تطبيق أمامي لمستخدمينا. يتم استخدام Vue 3 لإنشاء بوابات المسؤول واللوحات والعميل ، ويتم إنشاء واجهة AppMaster studio بالكامل باستخدام إطار عمل VueJS أيضًا.
نحن نستخدم نهجًا خاصًا يسمى Micro-frontends أو خدمات مصغرة للواجهة الأمامية لنكون قادرين على تطوير منتجنا بسرعة وكفاءة ؛ على سبيل المثال ، كل محرر نموذج بيانات ومحرر عمليات الأعمال هو تطبيق أمامي منفصل تمامًا في نظامنا الأساسي. هذا يسمح لنا بالتطوير بسرعة كبيرة وبشكل مستقل من وجهة نظر فريق التطوير ، مما يزيد من السرعة الإجمالية لمنتجنا. كل هذه المزايا التي يمكن لعملائنا الحصول عليها باستخدام تطبيقاتنا.
في المستقبل ، بالإضافة إلى وضع التطبيق أحادي الصفحة SPA ، سنضيف وضع SSR (العرض من جانب الخادم) ، والذي سيسمح لعملائنا بإنشاء ليس فقط لوحات الإدارة والبوابات المخصصة ولكن أيضًا مواقع الويب كاملة الميزات باستخدام تحسين السيو.
حول لا كود
أحد العناصر الرئيسية التي تؤثر على إضفاء الطابع الديمقراطي على الترميز هو نهج تطوير عدم وجود كود . في الوقت الحاضر ، يمكن لعدد أكبر من الأشخاص الوصول إلى البرمجة بشكل عام مع غياب الترميز. فهو يجعل تصميم الويب وتطوير تطبيقات الأجهزة المحمولة وتطوير الويب سريع الاستجابة أكثر بساطة.
يعد AppMaster من بين التطبيقات التي يمكن استخدامها لإنشاء شفرة المصدر تلقائيًا. يمكنك عرض وفحص الكود في أي لحظة. مع AppMaster ، لديك خيار تخصيص معلومات المشروع باستخدام لغة الكمبيوتر. كما نسمح للأشخاص بتصدير الشفرة إذا أرادوا ذلك. هذا ضمان بأن لديك سيطرة كاملة وملكية على التطبيق الذي تعمل عليه مع AppMaster.
الاستنتاجات
إذا كنت تريد شرحًا أكثر تفصيلاً لكيفية اختلاف Vue3 عن Vue 2 ، إلى جانب مقتطفات التعليمات البرمجية ، فيمكنك الاطلاع على وثائق Vue.js الرسمية. لقد ذكرنا معظم التغييرات الرئيسية التي يجب أن تكون على دراية بها. من المهم أن تظل على دراية بالتحديثات الخاصة بـ Vue3 إذا كنت مهتمًا بإنشاء تطبيقات باستخدام هذا الإطار.
