في عام 2019 ، نمت شعبية إطار Vue بشكل لا يصدق. تضاعف عدد مرات تنزيل Vue الأسبوعية: في العام الماضي ، كان 600 ألف ، والآن هو 1.2 مليون. الإصدار الثالث الذي طال انتظاره من Vue ، وهو التكرار التالي للإطار ، سيصدر في وقت ما في الربع الأول من عام 2020.
في فيو 3.0. ومن المقرر العديد من الميزات الجديدة. تهدف هذه الميزات الجديدة إلى زيادة كفاءة المبرمجين ، وتحسين بناء الجملة ، وتحسين أداء النظام. أنا ، بصفتي الشخص الذي يدعم Vue ، أسعى جاهزًا لاستخدام الابتكارات فور ظهورها.
هنا أضع بعض النصائح المفيدة لأولئك الذين يرغبون في الاستعداد لمجيء الإصدار 3.0. آمل أن يتمكن الأشخاص الذين يتبعون هذه النصائح من التعود على الظروف الجديدة بسرعة كبيرة.
1. تحقق من أحدث ميزات Vue 3.0.
بالطبع ، لا يمكن للمرء الاستعداد لوصول شيء غير معروف تمامًا. هذا هو السبب في أنه من المهم أن تتعرف على
التغييرات في Vue 3.0. إليك ما أوصي به مع إيلاء اهتمام خاص لما يلي:
- تسمح لك واجهة برمجة تطبيقات Composition بتنظيم رمز المكون بشكل أفضل.
- يساعد دعم TypeScript ، من بين أشياء أخرى ، على تبسيط كتابة التعليمات البرمجية بسبب آليات إكمال الإدخال.
- التقديم السريع ، يتحقق من خلال تقديم الكثير من التحسينات للإطار الذي يزيد من أدائه.
- رفع الخصائص الساكنة ، مما يلغي الحاجة لإعادة تكوين العناصر الثابتة.
- يساعد العمل مع كائنات يمكن ملاحظتها باستخدام كائنات وكيل في تحسين الأداء وتوسيع إمكانات العمل مع الكائنات التفاعلية.
بالإضافة إلى ذلك ، أنصحك بمشاهدة
هذا الأداء من قِبل Evan Yu فيما يتعلق بجهاز Vue 3.0. يسمح لك هذا العرض التقديمي بفهم أفضل للأفكار التي تقف وراء الإطار.
بشكل عام ، من المهم بالتأكيد معرفة ما سيظهر بالضبط في الإصدار الجديد من الإطار ، ما الذي سيتغير. الحقيقة هي أن هذا قد يؤثر على كيفية تخطيط المبرمجين لهيكل مشاريعهم الحالية. خاصة في تلك الحالات عندما يتعلق الأمر بمشاريع جديدة. يجب أن يتم تنفيذ مشاريع Vue الجديدة التي سيتم إنشاؤها الآن والتي سيتم إنشاؤها في المستقبل القريب مع مراعاة نقلها إلى Vue 3.0. بفضل هذا ، لن يتحول هذا التحول إلى كابوس.
2. ابدأ في تعلم TypeScript
واحدة من أكثر تحدث عن التغييرات المتوقعة في Vue 3.0. - هذا هو دعم TypeScript. تتم إعادة كتابة قاعدة كود Vue في TypeScript. سيوفر ذلك للمطورين فرصة استخدام تلميحات الكتابة وإكمال التعليمات البرمجية في IDE الخاص بهم.
من المهم أن نلاحظ أن هذا لا يعني أن الجميع في حاجة ماسة إلى التبديل إلى TypeScript. لا يزال من الممكن كتابة مشاريع Vue في JavaScript. لكن استخدام TypeScript يعطي زيادة في سرعة وجودة الشفرة.
TypeScript (TS) هو مجموعة شاملة من JavaScript. هذه لغة ، يتم كتابة التعليمات البرمجية المكتوبة بها في JavaScript (JS). الفرق بين TS و JS هو أن TypeScript يتيح لك تحديد أنواع المتغيرات. يمكن اكتشاف الأخطاء في الكود المرتبط بالأنواع في مرحلة الترجمة. فيما يلي بعض مقتطفات الشفرة من
وثائق TypeScript. أحدهم مكتوب في TypeScript ، والآخر مكتوب بلغة JavaScript.
هنا هو رمز JS:
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.textContent = greeter(user);
وهنا هو رمز TS:
function greeter(person: string) { return "Hello, " + person; } let user = "Jane User"; document.body.textContent = greeter(user);
لاحظ أنه في رمز TS هناك مؤشرات على أنواع الكيانات. لا يؤدي تمرير وظيفة TS
greeter إلى سلسلة ، ولكن ، على سبيل المثال ، صفيف ، سيؤدي إلى ظهور رسالة خطأ عند محاولة ترجمة رمز TS.
إذا كنت ترغب في تعلم TypeScript -
هنا تذهب - بضعة موارد جيدة. في الواقع ، هناك عدد كبير من مصادر المعلومات على TS. من بينها ، يمكنك أن تجد بالضبط ما تحتاجه.
3. تعلم ميزات نمط فيو
فيو 3.0. يتضمن العديد من التحسينات بشأن التقديم. يتضمن ذلك رفع العناصر الثابتة والعمل المحسّن باستخدام الأشجار التجسيدية ، وحتى القدرة على كتابة طرق العرض الخاصة بك.
للحصول على أقصى استفادة مما يوفره لك Vue 3.0 ، ستحتاج بالتأكيد إلى إتقان قوالب Vue تمامًا. ربما ، بطبيعة الحال ، أفضل مصدر للمعرفة حول القوالب هو
وثائق Vue الرسمية.
علاوة على ذلك ، يمكن أن يساعد فهم كيفية عمل آلية رفع العناصر الثابتة ، وكيف يتم ترتيب تجميد الأشجار ، على زيادة كفاءة تطوير القوالب الخاصة بك. زيادة العناصر الثابتة هي آلية تؤدي عمليتها إلى عدم إعادة إنشاء العناصر الثابتة في كل مرة يتم فيها عرض الصفحة. بدلاً من ذلك ، يتم استخدام العناصر نفسها باستمرار.
تساعد أشجار التجسيد ، المؤلفة من كتل ، على تبسيط مراقبة الأجسام التفاعلية ، مما يقلل من عدد العمليات المنفذة أثناء التجسيد.
باستخدام الكتل لتشكيل شجرة التقديم4. البدء في تكوين واجهة برمجة التطبيقات
أحد أهم الابتكارات (والأكثر إثارة للجدل) في Vue 3.0. هو تكوين API. تستخدم Vue 2 الآن خيارات API. عند استخدامه ، يتم توزيع الرمز حسب المكون (البيانات ، الطرق ، الخصائص المحسوبة ، وما إلى ذلك).
بفضل واجهة برمجة التطبيقات الجديدة ، سيتم تجميع جميع الشفرات. سيؤدي ذلك إلى تحسين قابلية القراءة وتبسيط عملية استخراج الوظائف وإعادة استخدامها.
تكوين APIتعمل الآليات الجديدة من خلال توفير الوصول المباشر إلى نظام Vue التفاعلي ، والذي يسمح للمطورين بالتحكم الدقيق في ما يتم مراقبته. بالإضافة إلى ذلك ، يتم تقديم طريقة
setup() جديدة ، والتي يتم استدعاؤها مباشرة بعد
beforeCreate() وقبل
created() مباشرة
created() .
الشيء الأكثر أهمية هو أن
واجهة برمجة التطبيقات متوفرة الآن ، لذلك يمكن استخدامها بالفعل في المشاريع الحالية.
5. تحديث فو دورة حياة المعرفة
في القسم السابق ، كانت واجهة برمجة تطبيقات Composition API طريقة جديدة لإضافة وظائف للمكونات. تشير حقيقة أن طريقة دورة حياة مكون
setup() قبل الأسلوب الذي
created() إلى أن
setup() لا يملك حق الوصول إلى بيانات المكون أو طرقه أو خصائصه المحسوبة.
الآن ليس واضحًا تمامًا كيف هي الميزات الجديدة الأخرى لبرنامج Vue 3.0. سوف تكون مرتبطة دورة حياة المكون. ولكن ، بغض النظر عن ذلك ، يجب على أولئك الذين يرغبون في بدء استخدام Vue 3.0 أن ينعشوا معرفتهم
بأساليب دورة حياة Vue بأسرع ما يمكن وهي تستحق الاهتمام عند توفر خصائص معينة ، وبأي ترتيب تُسمى الأساليب وما إلى ذلك.
فو دورة الحياةالنتائج
ونتيجة لذلك ، أود أن أقول إن الشخص الذي يريد أن يتعلم بسرعة التقنيات الجديدة يستحق ببساطة التعلم. الأمر يستحق دفع أكبر قدر ممكن من الوقت. لقد أوضح فريق تطوير Vue بالتأكيد للمجتمع إطار عمل Vue 3.0. تم إنشاؤه بطريقة تسهل الانتقال إليها لأولئك الذين يستخدمون Vue بالفعل. لذلك ، سيكون من الخطأ التفكير في الأمر بهذه الطريقة: "إصدار Vue 3 ، سأنتظر الإصدار ، ثم سأكتشفه". "فهم" هو أفضل مقدما. آمل أن يساعد ما تمت مناقشته في هذه المقالة الجميع في الإعداد بشكل مناسب لاجتماع Vue 3.0.
أعزائي القراء! ماذا تتوقع من فيو 3.0.؟
