بدلا من المقدمة
يتم استخدام Vue في جميع مشاريع FunCorp. نحن نراقب عن كثب تطوير الإطار ، ونعمل دائمًا على تحسين عملية التطوير وتنفيذ أفضل الممارسات. وبطبيعة الحال ، لم نتمكن من المرور وعدم ترجمة المقال الذي أجراه فيليب راكوفسكي ، المؤسس المشارك لبرنامج VueStorefront ، حول ميزات Vue 3 الجديدة التي تؤثر بشكل خطير على كتابة التعليمات البرمجية.
آخر مرة نظرنا في الميزات التي تؤثر على
أداء Vue 3 . نحن نعلم بالفعل أن التطبيقات المكتوبة على الإصدار الجديد من إطار العمل تعمل بسرعة كبيرة ، ولكن الأداء ليس هو التغيير الأكثر أهمية. بالنسبة لمعظم المطورين ، يعد تأثير Vue 3 على الطريقة التي تكتب بها الكود أكثر أهمية.
كما قد تكون خمنت ، سيكون لدى Vue 3 الكثير من الميزات الرائعة. لحسن الحظ ، أضاف فريق Vue مزيدًا من التحسينات والإضافات بدلاً من كسر التغييرات. لهذا السبب ، يجب أن يصبح معظم المطورين الذين يعرفون Vue 2 مرتاحين للبناء الجديد.
لنبدأ بواجهة برمجة التطبيقات التي سمعها الكثير منكم.
واجهة برمجة تطبيقات التكوين
تُعد واجهة برمجة تطبيقات واجهة برمجة التطبيقات (API) هي أكثر الميزات التي تم الحديث عنها والمذكورة في الإصدار الرئيسي التالي من Vue. يوفر بناء جملة واجهة برمجة تطبيقات API طريقة جديدة تمامًا لتنظيم التعليمات البرمجية وإعادة استخدامها.
نقوم الآن بإنشاء مكونات باستخدام بناء جملة يسمى API Options. لإضافة منطق ، نقوم بإنشاء خصائص (خيارات) في كائن المكون ، على سبيل المثال ، البيانات والطرق والحساب وما إلى ذلك. العيب الرئيسي لهذا النهج هو أنه ليس رمز JavaScript على هذا النحو. عليك أن تعرف بالضبط ما هي الخيارات المتاحة في القالب وكيف سيكون هذا. يقوم برنامج التحويل البرمجي Vue بتحويل الخصائص إلى تعليمات JavaScript البرمجية لك. نظرًا لهذه الميزة ، لا يمكننا استخدام الإكمال التلقائي أو التحقق من النوع بالكامل.
تعمل واجهة برمجة تطبيقات API على حل هذه المشكلة وتجعل من الممكن استخدام الآليات المتاحة من خلال الخيارات باستخدام وظائف JavaScript العادية.
يصف فريق Vue واجهة برمجة تطبيقات واجهة برمجة التطبيقات بأنها "واجهة برمجة تطبيقات اختيارية قائمة على الميزات تتيح استخدامًا مرنًا للتكوين في منطق المكون." الرمز المكتوب باستخدام واجهة برمجة التطبيقات الجديدة أسهل في القراءة ، مما يسهل فهمه.
لفهم كيفية عمل بناء الجملة الجديد ، ضع في اعتبارك مثال على مكون بسيط.
<template> <button @click="increment"> Count is: {{ count }}, double is {{ double }}, click to increment. </button> </template> <script> import { ref, computed, onMounted } from 'vue' export default { setup() { const count = ref(0) const double = computed(() => count.value * 2) function increment() { count.value++ } onMounted(() => console.log('component mounted!')) return { count, double, increment } } } </script>
سنقوم بتقسيم الكود إلى أجزاء وتحليل ما يحدث هنا.
import { ref, computed, onMounted } from 'vue'
كما ذكرت أعلاه ، تعرض واجهة برمجة تطبيقات Composition خيارات المكونات كوظائف ، لذلك ، أولاً وقبل كل شيء ، يجب علينا استيراد الوظائف الضرورية. في هذا المثال ، نحتاج إلى إنشاء خاصية تفاعلية باستخدام المرجع المحسوب باستخدام حساب محسوب والوصول إلى ربط دورة حياة محمولة باستخدام وظيفة onMounted.
قد يكون لديك سؤال: ما هي طريقة الإعداد الغامضة هذه؟
export default { setup() {} }
باختصار ، يعد الإعداد مجرد دالة تنقل الخصائص والوظائف إلى قالب. نحن نصف كل الخصائص التفاعلية والمحسوبة ، وخطافات دورة الحياة ، وجميع المراقبين في وظيفة الإعداد ، ثم نعيدهم لاستخدامهم في القالب.
إلى حقيقة أننا لن نعود من الإعداد ، لن يكون هناك وصول في القالب.
const count = ref(0)
تتم تهيئة خاصية رد الفعل العد باستخدام الدالة ref. يستغرق بدائية أو كائن وإرجاع رابط رد الفعل. سيتم تخزين القيمة التي تم تمريرها في خاصية القيمة للارتباط الذي تم إنشاؤه. على سبيل المثال ، إذا كنا نريد الوصول إلى قيمة العدد ، فنحن بحاجة إلى الوصول صراحةً إلى count.value.
const double = computed(() => count.value * 2) function increment() { count.value++ }
لذلك نعلن خاصية مزدوجة محسوبة وظيفة زيادة.
onMounted(() => console.log('component mounted!'))
باستخدام الخطاف onMounted ، نطبع رسالة إلى وحدة التحكم بعد تركيب المكون لإظهار هذا الاحتمال.
return { count, double, increment }
حتى يتوفر العدد والخصائص المزدوجة وطريقة الزيادة في القالب ، نرجعها من طريقة الإعداد.
<template> <button @click="increment"> Count is: {{ count }}, double is {{ double }}. Click to increment. </button> </template>
وفويلا! لدينا إمكانية الوصول إلى الخصائص والأساليب من الإعداد ، تمامًا كما لو كان قد تم الإعلان عنها من خلال واجهة برمجة تطبيقات Options القديمة.
هذا مثال بسيط ، يمكن بسهولة كتابته باستخدام واجهة برمجة تطبيقات Options.
لكن ميزة واجهة برمجة التطبيقات الجديدة ليست في القدرة على كتابة التعليمات البرمجية بأسلوب مختلف ، ولكن في الاحتمالات المتاحة لإعادة استخدام المنطق.
إعادة استخدام الرمز مع واجهة برمجة تطبيقات Composition
دعنا نلقي نظرة فاحصة على فوائد API الجديدة للتكوين ، على سبيل المثال ، لإعادة استخدام الكود. الآن ، إذا أردنا استخدام جزء من الكود في العديد من المكونات ، فلدينا خياران: المزيج وفتحات النطاق. كلا الخيارين لها عيوبها.
نريد استخراج وظيفة العداد وإعادة استخدامه في المكونات الأخرى. فيما يلي مثال على كيفية القيام بذلك باستخدام واجهة برمجة التطبيقات الحالية واستخدام واجهة برمجة التطبيقات الجديدة.
لتبدأ ، والنظر في تنفيذ باستخدام mixins.
import CounterMixin from './mixins/counter' export default { mixins: [CounterMixin] }
أكبر مشكلة في هذا النهج هي أننا لا نعرف شيئًا عن ما تتم إضافته إلى مكوننا. هذا يجعل الفهم صعباً وقد يؤدي إلى تعارض مع الخصائص والأساليب الحالية.
الآن النظر في فتحات مع نطاق محدود.
<template> <Counter v-slot="{ count, increment }"> {{ count }} <button @click="increment">Increment</button> </Counter> </template>
عند استخدام فتحات ، نحن نعرف بالضبط الخصائص التي يمكننا الوصول إليها من خلال توجيه v-slot ، وهو أمر سهل الفهم. عيب هذا النهج هو أنه يمكننا فقط الوصول إلى بيانات مكون العداد.
الآن النظر في تطبيق باستخدام API التكوين.
function useCounter() { const count = ref(0) function increment () { count.value++ } return { count, incrememt } } export default { setup () { const { count, increment } = useCounter() return { count, increment } } }
يبدو أكثر أناقة بكثير ، أليس كذلك؟ نحن لسنا مقيدين إما بقالب أو نطاق ، ونحن نعرف بالضبط ما هي خصائص العداد المتاحة. ونظرًا لحقيقة أن useCounter هي مجرد وظيفة تقوم بإرجاع البيانات ، كمكافأة ممتعة نحصل على إكمال التعليمات البرمجية في المحرر. لا يوجد سحر هنا ، لذلك يمكن للمحرر مساعدتنا في التحقق من النوع وإعطاء تلميحات.
استخدام مكتبات الطرف الثالث يبدو أيضًا أفضل. على سبيل المثال ، إذا كنا نرغب في استخدام Vuex ، فيمكننا استيراد وظيفة useStore بشكل صريح وعدم سد نموذج Vue باستخدام خاصية. $ Store هذه. يسمح لك هذا النهج بالتخلص من التلاعب الإضافي في الإضافات.
const { commit, dispatch } = useStore()
إذا كنت تريد معرفة المزيد عن واجهة برمجة تطبيقات Composition وتطبيقاتها ، فإنني أوصي بقراءة وثيقة يشرح فيها فريق Vue أسباب إنشاء واجهة برمجة تطبيقات جديدة ويقدم حالات يكون ذلك مفيدًا فيها. يوجد أيضًا مستودع رائع مع أمثلة لاستخدام واجهة برمجة تطبيقات Composition من Thorsten Lünborg ، أحد أعضاء فريق Vue الأساسي.
التكوين وتصاعد التغييرات
هناك تغييرات مهمة أخرى في Vue الجديدة في الطريقة التي نبني بها تطبيقنا وتكوينه. لنلقِ نظرة على مثال.
import Vue from 'vue' import App from './App.vue' Vue.config.ignoredElements = [/^app-/] Vue.use() Vue.mixin() Vue.component() Vue.directive() new Vue({ render: h => h(App) }).$mount('#app')
نحن نستخدم الآن كائن Vue العمومي لتكوين وإنشاء مثيلات Vue جديدة. سيؤثر أي تغيير نقوم به على كائن Vue على المثيلات والمكونات النهائية.
دعونا نرى كيف سيعمل هذا في Vue 3.
import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.config.ignoredElements = [/^app-/] app.use() app.mixin() app.component() app.directive() app.mount('#app')
كما لاحظت بالفعل ، يشير التكوين إلى مثيل Vue معين تم إنشاؤه باستخدام createApp.
هذا يجعل الكود الخاص بنا أكثر قابلية للقراءة ، ويقلل من احتمال حدوث مشاكل غير متوقعة مع الإضافات الخارجية. الآن يمكن لأي مكتبة تابعة لجهة خارجية تقوم بتعديل كائن Vue العمومي أن تؤثر على تطبيقك في مكان غير متوقع (خاصةً إذا كان مزيج عالمي) ، وهو أمر مستحيل في Vue 3.
وتناقش هذه التغييرات في طلب تقديم العروض ، وربما في المستقبل سيكون التنفيذ مختلفًا.
فتات
ميزة أخرى رائعة يمكننا الاعتماد عليها في Vue 3.
ما هي شظايا؟
حاليًا ، يمكن أن يحتوي المكون على عنصر جذر واحد فقط ، مما يعني أن الكود أدناه لن يعمل.
<template> <div>Hello</div> <div>World</div> </template>
السبب هو أن مثيل Vue المختبئ خلف كل مكون لا يمكن إرفاقه إلا بعنصر DOM واحد. الآن هناك طريقة لإنشاء مكون بعدة عناصر جذرية: لهذا تحتاج إلى كتابة مكون بأسلوب وظيفي لا يحتاج إلى مثيل Vue الخاص به.
اتضح أن نفس المشكلة موجودة في مجتمع React ، فقد تم حلها باستخدام عنصر Fragment الظاهري.
يبدو مثل هذا:
class Columns extends React.Component { render() { return ( <React.Fragment> <td>Hello</td> <td>World</td> </React.Fragment> ); } }
على الرغم من أن Fragment يشبه عنصر DOM عادي ، إلا أنه ظاهري ولن يتم إنشاؤه في شجرة DOM. باستخدام هذا النهج ، يمكننا استخدام وظيفة عنصر جذر واحد دون إنشاء عنصر إضافي في DOM.
يمكنك الآن استخدام الأجزاء في Vue 2 ، ولكن باستخدام مكتبة vue-fragments ، وفي Vue 3 ستعمل خارج المربع!
تشويق
فكرة أخرى رائعة من نظام React الذي سيتم تنفيذه في Vue 3 هي التشويق.
توقف التشويق مؤقتًا عن عرض المكون ويعرض كعبًا إلى أن تتحقق بعض الشروط. في Vue London ، لمست إيوان يو عرضًا مؤقتًا وكشف واجهة برمجة التطبيقات التي يمكننا توقعها في المستقبل. سيكون للمكون التشويقي فتحتان: للمحتوى وللفعب.
<Suspense> <template > <Suspended-component /> </template> <template #fallback> Loading... </template> </Suspense>
سيتم عرض كعب الروتين حتى يصبح مكون <Suspended-component /> جاهزًا. قد يتوقع المكون المعلق أيضًا تحميل المكون غير المتزامن أو تنفيذ بعض الإجراءات غير المتزامنة في وظيفة الإعداد.
نماذج متعددة الخامس
نموذج v هو توجيه يمكنك من خلاله استخدام الربط ثنائي الاتجاه. يمكننا تمرير الخاصية التفاعلية وتغييرها داخل المكون.
نحن معروفون للعمل مع عناصر النموذج.
<input v-model="property" />
لكن هل تعلم أنه يمكن استخدام v-model مع أي مكون؟ تحت الغطاء ، يقوم v-model فقط بإعادة توجيه معامل القيمة والاستماع إلى حدث الإدخال.
يمكنك إعادة كتابة المثال السابق باستخدام بناء الجملة هذا كما يلي:
<input v-bind:value="property" v-on:input="property = $event.target.value" />
يمكنك حتى تغيير أسماء الممتلكات والأحداث الافتراضية باستخدام خيار الطراز:
model: { prop: 'checked', event: 'change' }
كما ترون ، يمكن أن يكون توجيه v-model "سكرًا نحويًا" مفيدًا للغاية إذا كنا نريد استخدام ارتباط ثنائي الاتجاه في مكوناتنا. لسوء الحظ ، يمكن أن يكون هناك نموذج v واحد فقط لكل مكون.
لحسن الحظ ، في Vue 3 سيتم حل هذه المشكلة. يمكننا تمرير الاسم إلى نموذج v واستخدام أكبر قدر من طراز v عند الضرورة.
مثال للاستخدام:
<InviteeForm v-model:name="inviteeName" v-model:email="inviteeEmail" />
وتناقش هذه التغييرات في طلب تقديم العروض ، وربما في المستقبل سيكون التنفيذ مختلفًا.
بوابات
البوابات هي مكونات تم إنشاؤها لتقديم المحتوى خارج التسلسل الهرمي للمكون الحالي. هذه أيضًا إحدى الميزات
المنفذة في React . في وثائق React ، يتم وصف البوابات على النحو التالي: "تسمح لك البوابات بتقديم الأطفال في عقدة DOM خارج التسلسل الهرمي DOM للمكون الأصل."
تعد البوابات مفيدة في تنفيذ المكونات مثل الإطارات المشروطة ، والنوافذ المنبثقة ، وجميع العناصر التي تحتاج إلى عرضها في أعلى الصفحة.
عند استخدام البوابات ، يمكنك التأكد من أن أنماط المكون الأصل لن تؤثر على المكون الفرعي. سيوفر لك أيضًا اختراقات z-index القذرة.
لكل بوابة ، نحتاج إلى تحديد الوجهة التي يجب أن يتم عرض محتوى المدخل عليها.
فيما يلي خيار للتنفيذ في مكتبة portal-vue ، التي تضيف بوابات إلى Vue 2.
<portal to="destination"> <p>This slot content will be rendered wherever the portal-target with name 'destination' is located.</p> </portal> <portal-target name="destination"> </portal-target>
وفي Vue 3 ، ستكون هذه الميزة خارج الصندوق.
واجهة برمجة تطبيقات توجيه جديدة مخصصة
ستتغير واجهة برمجة التطبيقات للتوجيه المخصص قليلاً في Vue 3 لتتطابق بشكل أفضل مع دورة حياة المكون. سيصبح إنشاء التوجيهات أكثر سهولة وبالتالي يسهل على المبتدئين فهمه وتعلمه.
الآن يبدو إعلان توجيه المستخدم كما يلي:
const MyDirective = { bind(el, binding, vnode, prevVnode) {}, inserted() {}, update() {}, componentUpdated() {}, unbind() {} }
وفي الإصدار الثالث ، سيبدو كما يلي:
const MyDirective = { beforeMount(el, binding, vnode, prevVnode) {}, mounted() {}, beforeUpdate() {}, updated() {}, beforeUnmount() {},
على الرغم من أن هذه التغييرات كسر ، إلا أنها يمكن استخدامها مع بنية Vue متوافقة.
تمت مناقشة API أيضًا وقد تتغير في المستقبل.
ملخص
بجانب الابتكار الكبير - واجهة برمجة تطبيقات Composition - يمكننا أن نجد العديد من التحسينات الأصغر. من الواضح أن Vue تتجه نحو تحسين تجربة المطورين ، نحو تبسيط واجهات برمجة التطبيقات البديهية. من الرائع أيضًا أن نرى أن فريق Vue قرر إضافة الكثير من الأفكار إلى جوهر الإطار الذي تم تنفيذه بالفعل في مكتبات الطرف الثالث.
تحتوي القائمة أعلاه فقط على التحسينات والتغييرات الأكثر أهمية على واجهة برمجة التطبيقات. إذا كنت ترغب في معرفة المزيد عن الآخرين ، تحقق من
مستودع RFC .