سوف Vue 3 الحصول على أسرع

أحد أكثر الأحداث إثارة للانتباه في عالم Frontend هذا العام هو نشر مستودع Vue التالي - جزء من وظائف الإصدار الثالث من VueJS. توفر هذه المقالة نظرة عامة على الميزات القاتلة الجديدة لبرنامج VueJS. في وقت نشر المقال ، كان المستودع في حالة Pre-Alpha . يمكن الاطلاع على خطط الإصدار في خريطة الطريق

قبل التاريخ

في فبراير 2018 ، شارك Evan You ، مؤسس Vue.js ، خططه للإصدار 3 من الإطار الشعبي:

• تقسيم الوظائف إلى حزم لعزل النطاق
• يظهر TypeScript في قاعدة البيانات
• ستكون النسخة الثالثة متوافقة مع الإصدار الثاني (لن يتم كسر الكود القديم)
• تعتمد المراقبون في الإصدار 3.0 على Proxy ، مما سيزيد من سرعة التقديم ويزيل عددًا من القيود المفروضة بواسطة Object.defineProperty
• ستكون قادرًا على renderTracked لأول مرة باستخدام renderTracked و renderTracked الجديدة renderTriggered
• بفضل إدخال اهتزاز الأشجار (باستثناء التوجيهات غير المستخدمة من البنية) ، سيكون حجم الإطار أقل من 10 كيلو بايت في شكل مضغوط
• فتحة الأمثلية
• الأداء في vue 3 سيحسن بنسبة 100 ٪

يتم الآن استيراد ميزات مثل المكونات المدمجة ومساعدة وقت التشغيل التوجيهي (طراز v) عند الطلب وقابلة للتشجير
ايفان لك

سيقوم المترجم بتتبع وجود التوجيهات وإدراجها في الإنشاء في مرحلة الترجمة.

في عملية العمل على Vue 3 ، رفض إيفان إعادة كتابة المكونات إلى الفئات وبدلاً من ذلك ، قام بتنفيذ API وظيفية.

نظرًا لأن الإصدار الجديد سيستخدم الوكلاء غير المدعومين في IE ، يخطط Evan لإنشاء بنية منفصلة لـ IE11. في المجموع ، وعد 4 مراحل:

1. مرحلة ألفا - مرحلة الانتهاء من المترجم وتقديم ssr
2. المرحلة التجريبية - مرحلة الانتهاء من المكتبات الرئيسية (Vue Router و Vuex و Vue CLI و Vue DevTools)
3. مرحلة RC - مرحلة ما قبل الإصدار بما في ذلك الإصدار 2.0
4. بناء IE11
5. الإصدار النهائي

خطط إيفان لإصدار نهائي لعام 2019 ، لكن المشروع لا يزال في مرحلة ما قبل ألفا.

سوف Vue 3 يكون أسرع

بفضل عدد من الابتكارات ، ستصبح Vue 3 أسرع مرتين من الإصدار السابق.

القائم على وكيل الرصد والتفاعلية

كان أحد الابتكارات الرئيسية هو التغيير في آلية مراقبة الكائنات من getters وعدادات Object.defineProperty إلى Proxy. يمكن الآن لبرنامج Vue تتبع إزالة وإضافة خصائص الكائنات التفاعلية دون استخدام Vue.set و Vue.delete. زاد الابتكار من سرعة التقديم والبرمجة وقلل من استهلاك الذاكرة بمقدار 2 مرة! يمكنك مقارنة أداء Vue 2 و Vue 3 عن طريق تنزيل مستودع Ilya Klimov

مقارنة أداء Vue 2 (يسار) و Vue 3 (مرحلة ما قبل ألفا ، يمين)


بفضل الوكلاء ، لن يتم فقد التفاعل عند تغيير عمليات معالجة الكائنات التي لا يتم تتبعها في Vue 2. الآن لن تقوم Vue بعبور خصائص كائن بشكل متكرر لحساب التغييرات.

ما صنع من الوعود:

• يتم إعادة رسم الأحفاد والآباء بشكل مستقل
• انخفض حجم Vue 3 من 20 كيلو بايت إلى 10 كيلو بايت في شكل مضغوط
• تمت إضافة TypeScript

تحسينات أخرى:

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

تشير العلامات النجمية إلى واجهة برمجة التطبيقات التجريبية .
تحديث: في وقت لاحق ، قرر إيفان التخلي عن الوقت.

مستوحاة من HOC ، نفذت Reacta Evan وظائف الإعداد مع منطق قابلة لإعادة الاستخدام والسنانير المخصصة. على عكس المزيج ، فإن خطافات دورة الحياة لا تحل محل بعضها البعض.

تعزيز VDom التصحيح

ثابت جويستيك المحتوى



يتم نقل المحتوى الثابت خارج رقعة VDom عند تجميع القالب. استلهم Vue من Svelte للقيام بذلك:

 <div>Hello, {{name}}</div> 

هنا ، يتم تغيير الكائن والسياق الذي تم تغييره . إذا كان التغيير يحتوي على متغير تفاعلي ، فسيتم تحديثه في السياق.

 p(changed, ctx) { if(changed.name) { set_data(t1, ctx.name); } } 

في التطبيق السابق ، مرر برنامج Vue كل العقد ، بما في ذلك تلك الثابتة:

 function render(){ const children = []; for(let i = 0; i < 5; i++) { children.push(h('p', { class: 'text' }, i === 2 ? this.message : 'Lorem upsum')) } return h('div', { id: 'content' }, children) } 

استراتيجية تجميع قالب جديدة

في الإصدار الجديد ، ينقسم القالب إلى كتل:

• ينقسم القالب إلى كتل
• بنية العقد داخل كل كتلة ثابتة تمامًا.
• لتتبع القيم الديناميكية في كتلة ، لا يلزم سوى صفيف واحد مسطح ، حيث يتم وضعها

باستخدام الاستراتيجية الجديدة ، يعتمد الأداء مباشرةً على مقدار المحتوى الديناميكي بدلاً من حجم القالب.

سيتم تكييف Vue 3 بشكل أفضل مع المشروعات الكبيرة

تواجه المشروعات الكبيرة المشكلات التالية عند استخدام Vue:

1. ليس الكمال دعم TypeScript
2. مكونات ضخمة يصعب دعمها
3. عدم وجود نمط بسيط لإعادة استخدام الرمز

في البداية ، تم التخطيط لإضافة فئات لدعم TS. ولكن واجه فريق Vue مشاكل:

• خلط الدعائم وغيرها من الصفات مع هذا هو مشكلة
• الديكور لفئات ES6 في TC39 غير مستقر

طلب فريق إيفان المساعدة من خبراء TC39 واكتشف أن تطبيقًا مشابهًا قد يتعارض مع المكونات الإضافية التي تجمع بين العديد من الدعائم والسمات في سياق Vue.

من المحتمل أن تحل هذه المشكلات عن طريق الديكور ، لكنها لا تزال قيد التطوير.

واجهة برمجة تطبيقات التكوين

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

مثال على استخدام Vue 3. ينقسم المكون إلى وظائف منطقية ، حيث يمكنك من خلاله استخدام خطاطيف التفاعل ودورة الحياة.

استيراد الخطافات الجديدة من واجهة برمجة تطبيقات التكوين:

 import { reactive, computed, onMounted } from '@vue/composition-api'; export default { setup() { const { state } = countAnimal("rabbit") const { getType, anotherState } = anotherCount() return { state, getType, anotherState } } } 

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

 function countAnimal(name) { const state = reactive({ count: 0, animal: computed(() => state.count % 2 ? name : 'bear') }) function increment() { setTimeout(() => { state.count++; increment() }, 1000) } onMounted(() => { increment() }) return { state } } 

نقوم بإنشاء وظيفة أخرى anotherCount ، والتي تحتوي أيضًا على طريقة الزيادة والحالة مع العداد واسم الحيوان. تمرير أسلوب getType اسم الحيوان من القالب.

 function anotherCount() { const anotherState = reactive({ count: 0, animal: 'fox' }) function getType(name) { return name == 'bear' ? 'slow' : 'fast' } function increment() { setTimeout(() => { anotherState.count+=10; increment() }, 1000) } onMounted(() => { increment() }) return { getType, anotherState } } 

يعرض القالب 2 عدادات واسمين للحيوانات. يختلف نوع الركض اعتمادًا على اسم الحيوان.

 <template> <div> <div>Count {{state.animal}}: {{ state.count }}</div> <div>{{state.animal}} runs {{getType(state.animal)}}</div> <div>Another: Count {{anotherState.animal}}: {{ anotherState.count }}</div> </div> </template> 

تستخدم السنانير الجديدة داخل الإعداد دون كسر API القديمة. لاحظ أن onMounted يشير إلى ربط دورة حياة مكون واحد.

هذا المعهد لديه العديد من المزايا:

• خطاطيف دورة الحياة لا تفرك بعضها البعض
• مصدر واضح من الخصائص
• لا يتم إنشاء مثيلات مكون إضافية

استنتاج

أهم التغييرات في Vue 3. مذكورة أعلاه ، وسيتم إخفاء معظم التحسينات تحت غطاء الشفرة الذي تم إنشاؤه بواسطة المترجم.

تحسينات كبيرة:

• الكود الذي تم إنشاؤه هو الأمثل لمترجم JS
• حزمة ولدت أسهل
• إعادة رسم مكونات الأصل / الطفل بفضل خوارزمية الترقيع المحسّنة

وضعت Vue نفسها باعتبارها واحدة من أسرع الأطر والأكثر مثالية. سوف يصبح الإصدار الجديد أسرع وأسهل. تعد Vue 3 مهمة رائعة لشبكة الويب المحمولة والموجهة نحو الأداء. يمكن ترك التعليقات على التغييرات المستقبلية في RFC الرسمي (طلب التعليقات).
PS شكرا لك على تصحيح الأخطاء المطبعية.