Vue.js 2.6 का अवलोकन

नमस्कार, हेब्र!

बहुत जल्द, Vue.js का एक नया संस्करण जारी किया जाना चाहिए - 2.6। कटौती के तहत आपको अगले संस्करण की नई विशेषताओं का अवलोकन मिलेगा, जिसमें नया स्लॉट सिंटैक्स, Vue.observable () और बहुत कुछ शामिल है!

1. स्कोप स्लॉट्स के लिए नया सिंटैक्स

यह सबसे महत्वपूर्ण परिवर्तनों में से एक है। इसमें शामिल हैं:

• नया वी-स्लॉट निर्देशन संयोजन स्लॉट और स्लॉट-गुंजाइश
• नामांकित स्कोप स्लॉट्स का उपयोग करने के लिए शॉर्टकट

इसे समझने का सबसे आसान तरीका एक उदाहरण के साथ है:

संस्करण 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. नया वी-स्लॉट सिंटैक्स
   
   • विस्तृत विवरण
   • चर्चा
   
   
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- स्लॉट में ऑब्जेक्ट के लिए समान सिंटैक्स नहीं है

उनसे छुटकारा पाने के लिए, 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.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. सर्वर पर डेटा डाउनलोड करना

नए अपडेट में, वीयू-सर्वर-रेंडरर ने एसएसआर के लिए डेटा लोडिंग रणनीति को बदल दिया है।

पहले, हमें asyncData () विधियों को रूटर के माध्यम से प्राप्त घटकों पर कॉल करने की सलाह दी गई थी।

नए संस्करण ने घटकों के लिए एक विशेष विधि शुरू की - सर्वरप्रेच ()। वीयू-सर्वर-रेंडरर इसे प्रत्येक घटक पर कॉल करेगा और हल किए गए वादों की प्रतीक्षा करेगा:

 <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> 

यह पता लगाने के लिए कि सभी सर्वरपार्टीच () के लिए प्रतीक्षा समाप्त हो गई और एप्लिकेशन ने अपना रेंडर पूरा कर लिया, सर्वर रेंडर फ़ंक्शन के संदर्भ में, एक रेंडर () हुक जोड़ना संभव हो गया:

 /*  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. ईएसएम ब्राउज़रों के लिए नया निर्माण

नए संस्करण में, एक और 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 लिखने के बजाय: 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 () विधि को ओवरराइड करते हैं, तो VU प्रदर्शित होने के बाद 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. वी-काम के साथ चलने योग्य वस्तुओं के लिए

नए संस्करण में, वी-फॉर किसी भी ऑब्जेक्ट के साथ काम कर सकता है , जो चलने योग्य प्रोटोकॉल को लागू करते हैं , उदाहरण के लिए मैप या सेट। सच है, 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-renderer जोड़ना सुनिश्चित करें:

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

अद्यतन: Vue 2.6 आधिकारिक तौर पर जारी किया गया था, यहां आप इवान की पोस्ट पढ़ सकते हैं।

लेख को अंत तक पढ़ने के लिए धन्यवाद!