مرحبا بكم متابعي مدونة كبسولة البرمجة , في مقال اليوم سنتعرف على ابرز المزايا التي يتميز بها الاصدار الثالث من اطار العمل Vue.js .
ما هو اطار Vue.js
اطار Vue.js هو اطار عمل مبني على لغة Javascript وهو مجاني ومفتوح المصدر يستخدم في بناء واجهات احترافية لمواقع الويب وتطبيقات الهواتف الذكية وبرامج سطح المكتب ويعتمد اطار Vue.js على فلسفة SPA او Single Page Application مواقع ذات الصفحة الواحدة , يعتبر اطار Vue.js اطار تقدمي Progressive Framework لكونك تستطيع اضافة Vue.js الى مشروعك في اي مرحلة على عكس الاطر الاخرى التي لا تعتبر تقدمية , تم تطوير اطار Vue.js من طرف Evan You بعدما كان مهندسا في شركة Google , وتم اصدار اول نسخة من Vue.js سنة 2014 .
مميزات اطار Vue.js
- يمكننا ربط البيانات بال Attribute الخاصة بعناصر Html عن طريق الخاصية v-bind
- سهولة التحكم في عناصر Html عن طريق ال Derictives
- دعم المكونات Components حيت يمكننا تقسيم الواجهات الى عدة وحدات .
- يمكن عرض المشاهد view عن طريق قوالب Html دينامكية .
مميزات الاصدار الثالث Vue.js 3
من ابرز المميزات التي جاء بها الاصدار الثالث من Vue.js هو تحسين الاداء , حيت يمكنك استدعاء الاكواد التي تحتاجها من اي مكتبة دون استدعاء المكتبة كاملة مما يقلص حجم الملف الى اقل من 12 كيلو بايت , من المشاكل التي واجهت المطورين في النسخة الثانية من Vue.js هي ملف ال Component كلما ازداد حجم الكود كلما ازدادت صعوبة التعديل عليه ولحل هذه المشكلة جاءت النسخة الثالثة من Vue.js ب Composition Api مهمته هو توزيع الكود بطريقة منضمة مما يسهل عملية التعديل عليه او حتى اعادة استخدام الكود مع مكونات Components اخرى .
جاءت النسخة الثالثة بدعم كامل للغة Typescript وهي لغة مبنية على JavaScript وتدعم تعريف انواع البيانات الثابتة وتم كتابة الكود سورس Code Source ل Vue.js 3 بلغة Typescript . في الاطر الاخرى من JavaScript مثل اطار React.js لا يمكن كتابة مكون Components دون ان تجمع جميع عناصره تحت عنصر واحد ويسمى العنصر الاب وهذا ما كان ايضا في Vue.js 2 لكن في Vue.js 3 الامر مختلف تماما حيت يمكنك الاستغناء على العنصر الاب .
في الكثير من الاحيان نحتاج الى نقل مكون Components من مكان الى مكان اخر , مثلا نقل Components الى Components اخر او الى خارج ال Div الرئيسي ل Vue.js من ال Modals او اعلانات Popup حيت في غالب الاحيان تاتي بعد تحميل كل عناصر الصفحة , هاد الامر اصبح اكثر سهولة في Vue.js 3 مع تقنية نقل المكونات teleport .
تنصيب Vue.js
يمكن انشاء مشروع Vue.js بطريقتين , الطريقة الاولى عبر تضمين رابط ملف vue.js عن طريق CDN وتقوم باضافته اسفل الصفحة كما تقوم باستدعاء ملفات Javascript , اما الطريقة الثانية هي عن طريق Cli , لعمل مشروع عن طريق CDN يكفي وضع هذا السكريبت اسفل صفحة Html
<script src="https://unpkg.com/vue@next"></script>ولتنصيب Vue.js عن طريق Cli يمكنكم متابعة هذا الفيديو من قناة Vue Mastry يشرح كيفية عمل مشروع Vue.js عن طريق Cli 3 ويمكنك ايضا تعلم اطار Vue.js من نفس القناة لانها تقدم دورة احترافية لتعلم Vue.js .
الى هنا متابعينا الكرام نصل الى نهاية مقال اليوم اتمنى انكم استفدتم كثيرا منه ان كانت لديكم اي استفسارات لا تنسو وضعها في صندوق التعليقات او على صفحة اتصل بنا .