نظرة عامة على Vue.js 2.6

مرحبا يا هبر!

قريبًا ، يجب إصدار إصدار جديد من Vue.js - 2.6. ستجد في الجزء السفلي نظرة عامة على الميزات الجديدة للإصدار التالي ، بما في ذلك بناء جملة الفتحة الجديدة و Vue.observable () وأكثر من ذلك بكثير!

1. بناء جملة جديد لفتحات النطاق

هذا هو واحد من أهم التغييرات. ويشمل:

• توجيه v-slot جديد يجمع بين الفتحة ونطاق الفتحة
• اختصار لاستخدام فتحات النطاق المسمى

أسهل طريقة لفهم ذلك هي مثال:

كيف تم استخدام فتحات النطاق في الإصدار Vue@2.5.22:

<template> <TestComponent> <!--  scoped slot --> <div slot-scope="{ message }"> {{ `Default slot with message: ${message}` }} </div> <!--  scoped slot --> <div slot="text" slot-scope="{ text }"> {{ `Named slot with text: ${text}` }} </div> </TestComponent> </template> 

كيف يمكنني الآن:

 <template> <TestComponent> <!--  scoped slot --> <template v-slot="{ message }"> <div> {{ `Default slot with message: ${message}` }} </div> </template> <!--  scoped slot --> <template v-slot:text="{ text }"> <div> {{ `Named slot with text: ${text}` }} </div> </template> </TestComponent> </template> 

بالنسبة للشريحة الافتراضية ، يمكنك استخدام بناء جملة خاص إذا لم يتم استخدام فتحات مسماة:

 <template> <!-- v-slot     --> <TestComponent v-slot="{ message }"> <div> {{ `Default slot with message: ${message}` }} </div> </TestComponent> </template> 

وهنا الاختصار للفتحات المسماة:

 <template> <TestComponent> <!-- # -    v-slot: --> <template #text="{ text }"> <div> {{ `Named slot with text: ${text}` }} </div> </template> </TestComponent> </template> 

يمكن استخدام التوجيه الجديد دون أي متغيرات نطاق ، ولكن بعد ذلك ستظل الفتحة في نطاقات $ scopedSlots الخاصة بالوالد.

المراجع

1. بناء جملة v- فتحة جديدة
   
   • وصف مفصل
   • المناقشة
   
   
2. اختصار للفتحة الخامس
   
   • وصف مفصل
   • المناقشة
   
   

2. الحجة الديناميكية للتوجيه

إذا كنت تريد وسيطة ديناميكية لـ v-bind أو v-on ، فلديك في Vue@2.5.22 لديك خيار واحد فقط:

 <div v-bind="{ [key]: value }"></div> <div v-on="{ [event]: handler }"></div> 

ولكن لديه بضع عيوب:

• لا يعلم الجميع إمكانية استخدام v-bind / v-on على الكائنات وحول أسماء المتغيرات الديناميكية
• vue-template-compier يقوم بإنشاء كود غير فعال
• لا يحتوي v-slot على بناء جملة مماثل للكائنات

للتخلص منها ، يقدم Vue@2.6.0 بناء جملة جديد:

 <div v-bind:[key]="value"></div> <div v-on:[event]="handler"></div> 

أمثلة على الاستخدام:

 <template> <div> <!-- v-bind    --> <div v-bind:[key]="value"></div> <!--  v-bind    --> <div :[key]="value"></div> <!-- v-on    --> <div v-on:[event]="handler"></div> <!--  v-on    --> <div @[event]="handler"></div> <!-- v-slot    --> <TestComponent> <template v-slot:[name]> Hello </template> </TestComponent> <!--  v-slot    --> <TestComponent> <template #[name]> Cool slot </template> </TestComponent> </div> </template> 

المراجع

• وصف مفصل
• المناقشة

3. إنشاء كائنات تفاعلية باستخدام Vue.observable ()

في السابق ، لإنشاء كائن تفاعلي ، كان عليك الالتزام به داخل مثيل مكون vue. الآن لدينا طريقة منفصلة تجعل الكائن تفاعليًا - Vue.observable ().

يمكن استخدام الكائن التفاعلي بأمان في وظائف العرض والحساب.

مثال للاستخدام:

 import Vue from vue; const state = Vue.observable({ counter: 0, }); export default { render() { return ( <div> {state.counter} <button v-on:click={() => { state.counter++; }}> Increment counter </button> </div> ); }, }; 

4. تنزيل البيانات على الخادم

في التحديث الجديد ، غيّر vue-server-renderer استراتيجية تحميل البيانات لـ SSR.

في السابق ، تم إعلامنا باستدعاء أساليب asyncData () على المكونات التي تم الحصول عليها من خلال router.getMatchedComponents ().

قدم الإصدار الجديد طريقة خاصة للمكونات - serverPrefetch (). سوف يطلق عليه vue-server-renderer على كل مكون وينتظر حل الوعود التي تم حلها:

 <template> <div v-if="item"> {{ item.name }} </div> </template> <script> export default { //    async serverPrefetch() { await this.fetchItem(); }, computed: { item() { return this.$store.state.item; }, }, //    mounted() { if (!this.item) { this.fetchItem(); } }, methods: { async fetchItem() { await this.$store.dispatch('fetchItem'); }, }, }; </script> 

لمعرفة وقت انتهاء انتظار serverPrefetch () وإكمال التطبيق للعرض ، في سياق وظيفة تقديم الخادم ، كان من الممكن إضافة ربط ():

 /*  entry-server.js */ import { createApp } from './app'; export default context => new Promise((resolve, reject) => { const { app, router, store } = createApp(); const { url } = context; router.push(url); router.onReady(() => { context.rendered = () => { //       serverPrefetch() context.state = store.state; }; resolve(app); }, reject); }); 

5. تحسين الناتج خطأ مترجم

عند تجميع HTML في وظيفة التجسيد ، قد يلقي برنامج vue-template-compiler أخطاء. تستخدم Vue لعرض وصف للخطأ دون تحديد موقعه ، والآن سيظهر الإصدار الجديد مكانه.

مثال:

 <template> <div> <template key="test-key"> {{ message }} </template> </div> </template> 

خطأ vue-template-compiler@2.5.22:

  Error compiling template: <div> <template key="test-key"> {{ message }} </template> </div> - <template> cannot be keyed. Place the key on real elements instead. 

خطأ جديد إخراج vue-template-compiler@2.6.0:

  Errors compiling template: <template> cannot be keyed. Place the key on real elements instead. 1 | 2 | <div> 3 | <template key="test-key"> | ^^^^^^^^^^^^^^ 4 | {{ message }} 5 | </template> 

6. اصطياد الأخطاء غير المتزامنة

يمكن لـ Vue الآن التقاط الأخطاء غير المتزامنة في خطافات دورة الحياة ومعالجات الأحداث.

مثال:

 /* TestComponent.vue */ <template> <div @click="doSomething()"> Some message </div> </template> <script> export default { methods: { async doSomething() { await this.$nextTick(); throw new Error('Another Error'); }, }, async mounted() { await this.$nextTick(); throw new Error('Some Error'); }, }; </script> 

خطأ بعد التحميل:

 [Vue warn]: Error in mounted hook (Promise/async): "Error: Some Error" 

خطأ بعد النقر:

 [Vue warn]: Error in v-on handler (Promise/async): "Error: Another Error" 

7. بناء جديد لمتصفحات ESM

في الإصدار الجديد ، تتم إضافة مجموعة Vue أخرى - vue.esm.browser.js. إنه مصمم للمتصفحات التي تدعم وحدات ES6.

معالمه:

• يحتوي على مترجم HTML في تقديم وظيفة
• يستخدم بناء جملة الوحدات النمطية ES6
• يحتوي على رمز غير مترجم

مثال للاستخدام:

 <html lang="en"> <head> <title>Document</title> </head> <body> <div id="app"> {{ message }} </div> <script type="module"> //    vue.esm.js, //    , //        import Vue from 'path/to/vue.esm.browser.js'; new Vue({ el: '#app', data() { return { message: 'Hello World!', }; }, }); </script> </body> </html> 

أن نكون صادقين ، أود أن أرى تجميعًا آخر - مثل vue.esm.browser.js ، ولكن بدون برنامج التحويل البرمجي لـ HTML. بعد ذلك ، سأكون قادراً على إعطاء المتصفحات التي تحتوي على وحدات ES6 رمزًا أكثر حداثة عندما أقوم بتجميع القوالب أثناء التجميع.

8. اختصار v-bind.prop

التوجيه v-bind له معدل خاص - .prop. يمكنك أن ترى ما يفعله هنا في الوثائق . أنا شخصياً لم أستخدمها أبداً ولا أستطيع أن أتخيل الحالة عندما يكون الأمر يستحق استخدامها.

يوجد الآن اختصار خاص: بدلاً من كتابة v-bind: someProperty.prop = "foo" ، يمكنك كتابة .someProperty = "foo".

مثال:

كما كان في Vue@2.5.22:

 <template> <div> <div v-bind:textContent.prop="'Important text content'" /> <!--    --> <div :textContent.prop="'Important text content'" /> </div> </template> 

قدر الإمكان في Vue@2.6.0:

 <template> <div .textContent="'Important text content'" /> </template> 

9. دعم مخصص toString ()

كل شيء بسيط هنا: إذا تجاوزت الأسلوب toString () لكائن ، فسيستخدمه Vue بدلاً من JSON.stringify () عند عرضه.

مثال:

 /* TestComponent.vue */ <template> <div> {{ message }} </div> </template> <script> export default { data() { return { message: { value: 'qwerty', toString() { return 'Hello Habr!'; }, }, }; }, }; </script> 

في الإصدار Vue@2.5.22 سنرى على الشاشة:

 { "value": "qwerty" } 

في الإصدار Vue@2.6.0:

 Hello Habr! 

10. الخامس للعمل مع الأشياء القابلة للتكرار

في الإصدار الجديد ، يمكن لـ v-for العمل مع أي كائنات تنفذ البروتوكول القابل للتكرار ، على سبيل المثال تعيين أو تعيين. صحيح ، بالنسبة للخريطة والمجموعة في الإصدار 2.X لن يتم دعم التفاعل.

مثال:

 /* TestComponent.vue */ <template> <div> <div v-for="item in items" :key="item" > {{ item }} </div> </div> </template> <script> export default { data() { return { items: new Set([4, 2, 6]), }; }, }; </script> 

يمكنك رؤية جميع الميزات الجديدة قيد التنفيذ الآن عن طريق تثبيت الإصدار التجريبي من Vue:

 npm i vue@2.6.0-beta.3 

إذا قمت بترجمة ملفات vue أثناء التجميع أو استخدام SSRs ، فتأكد من إضافة برنامج vue-template-compiler و vue-server-render من نفس الإصدار:

 npm i vue-template-compiler@2.6.0-beta.3 vue-server-renderer@2.6.0-beta.3 

تحديث: تم إصدار Vue 2.6 رسميًا ، هنا يمكنك قراءة منشور Evan.

شكرا لقراءة المقال حتى النهاية!