Vue 3 तेज हो जाएगा

इस वर्ष के फ्रंटेंड की दुनिया में सबसे हड़ताली घटनाओं में से एक था, VueJS के तीसरे संस्करण की कार्यक्षमता का हिस्सा - अगला अगला संग्रह का Vue का प्रकाशन। यह लेख VueJS की नई हत्यारी विशेषताओं का अवलोकन प्रदान करता है। लेख के प्रकाशन के समय, भंडार प्री-अल्फा स्थिति में था। रिलीज की योजना रोडमैप पर देखी जा सकती है

प्रागितिहास

फरवरी 2018 में, Vue.js के निर्माता, इवान यू, ने लोकप्रिय फ्रेमवर्क के संस्करण 3 के लिए अपनी योजनाओं को साझा किया :

• कार्यक्षेत्र को अलग-थलग करने के लिए कार्यक्षमता को तोड़ें
• टाइपस्क्रिप्ट कोडबेस में दिखाई देता है
• Vue 3 2 संस्करण के साथ पीछे संगत होगा (यानी पुराने कोड को नहीं तोड़ेगा)
• संस्करण 3.0 में पर्यवेक्षक प्रॉक्सी पर आधारित हैं, जो प्रतिपादन की गति को बढ़ाएगा और Object.defineProperty द्वारा लगाए गए कई प्रतिबंधों को हटा Object.defineProperty
• आप नए renderTracked और renderTriggered हुक का उपयोग कर डेब्यू कर पाएंगे renderTriggered
• वृक्ष के हिलने (निर्माण से अप्रयुक्त निर्देशों को छोड़कर) की शुरूआत के लिए धन्यवाद, फ्रेम का आकार संपीड़ित रूप में 10kb से कम होगा
• स्लॉट ऑप्टिमाइज़ेशन
• Vue 3 में प्रदर्शन 100% सुधरेगा

बिल्ट-इन कंपोनेंट्स और डायरेक्टिव रनटाइम हेल्पर्स (वी-मॉडल) जैसी सुविधाएँ अब ऑन-डिमांड और ट्री-शेकेबल आयात की जाती हैं
आप इवान

संकलक निर्देशों के अस्तित्व को ट्रैक करेगा और उन्हें संकलन चरण में निर्माण में शामिल करेगा।

Vue 3 पर काम करने की प्रक्रिया में, इवान ने कक्षाओं में घटकों को फिर से लिखने से इनकार कर दिया और इसके बजाय एक कार्यात्मक एपीआई लागू किया।

चूंकि नया संस्करण IE में समर्थित नहीं है, जो प्रॉक्सी का उपयोग करेगा, इवान IE11 के लिए एक अलग बिल्ड बनाने की योजना बना रहा है। कुल मिलाकर, 4 चरणों का वादा:

1. अल्फा चरण - संकलक और एसएसआर-प्रतिपादन के अंतिम चरण का चरण
2. बीटा चरण - मुख्य पुस्तकालयों के अंतिम चरण (Vue Router, Vuex, Vue CLI, VueTools)
3. आरसी चरण - पूर्वेक्षण चरण जिसमें मुकदमा 2.0 शामिल है
4. IE11 का निर्माण
5. अंतिम रिलीज

इवान ने 2019 के लिए अंतिम रिलीज की योजना बनाई है, लेकिन परियोजना अभी भी पूर्व-अल्फा चरण में है।

Vue 3 तेज हो जाएगा

कई नवाचारों की बदौलत, Vue 3 पिछले संस्करण की तुलना में 2 गुना तेज हो जाएगा।

प्रॉक्सी आधारित अवलोकन और प्रतिक्रियाशीलता

प्रमुख नवाचारों में से एक गेटर्स से ऑब्जेक्ट्स की निगरानी के लिए तंत्र में परिवर्तन और प्रॉक्सी के लिए Object.defineProperty का निपटान था। अब Vue.set और Vue.delete का उपयोग किए बिना प्रतिक्रियाशील वस्तुओं के गुणों को हटाने और जोड़ने को ट्रैक कर सकते हैं। नवाचार ने प्रतिपादन और पटकथा की गति को बढ़ा दिया और स्मृति खपत को 2 गुना कम कर दिया! आप इल्या क्लिमोव के भंडार को डाउनलोड करके Vue 2 और Vue 3 के प्रदर्शन की तुलना कर सकते हैं

Vue 2 (बाएं) और Vue 3 (पूर्व-अल्फा चरण, दाएं) की प्रदर्शन तुलना


प्रॉक्सी के लिए धन्यवाद, व्यू 2 में ट्रैक नहीं किए गए ऑब्जेक्ट जोड़तोड़ को बदलते समय प्रतिक्रियाशीलता खो जाएगी। अब Vue परिवर्तनों की गणना करने के लिए किसी वस्तु के गुणों का पुनरावृत्ति नहीं करेगा।

वादों से क्या बनता है:

• वंशज और माता-पिता स्वतंत्र रूप से पुनर्वितरित होते हैं
• Vue 3 का आकार संकुचित रूप में 20kb से घटकर 10kb हो जाता है
• टाइपस्क्रिप्ट जोड़े गए

अन्य अनुकूलन:

• Vue 3 स्थैतिक सामग्री को याद रखेगा और केवल गतिशील डेटा को पैच करेगा
• स्टेटिक प्रॉप्स का दायरा बढ़ता चला जाता है
• विकास में आसानी के लिए, Vue 3 कोड मॉड्यूलर पैकेज में टूट गया है।
• रनटाइम-कोर पैकेज को क्रॉस-प्लेटफॉर्म बनाया गया है
• कक्षाओं के बजाय, इवान ने एक सेटअप फ़ंक्शन और हुक जोड़े जो कोड को साफ, संगठित और पुन: प्रयोज्य बनाते हैं *
• टाइम स्लाइसिंग *। जेएस कोड निष्पादन आवेदन के साथ उपयोगकर्ता बातचीत को अवरुद्ध किए बिना टुकड़ों में कट जाता है

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

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

नया टेम्पलेट संकलन रणनीति

नए संस्करण में, टेम्पलेट को ब्लॉकों में विभाजित किया गया है:

• टेम्पलेट को ब्लॉकों में विभाजित किया गया है
• प्रत्येक ब्लॉक के अंदर नोड्स की संरचना पूरी तरह से स्थिर है।
• एक ब्लॉक में गतिशील मूल्यों को ट्रैक करने के लिए, केवल 1 फ्लैट सरणी की आवश्यकता होती है, जहां उन्हें रखा जाता है

नई रणनीति के साथ, प्रदर्शन सीधे टेम्पलेट के आकार के बजाय गतिशील सामग्री की मात्रा पर निर्भर करता है।

Vue 3 को बड़ी परियोजनाओं के लिए बेहतर रूप से अनुकूलित किया जाएगा

Vue का उपयोग करते समय बड़ी परियोजनाओं को निम्नलिखित समस्याओं का सामना करना पड़ता है:

1. सही टाइपस्क्रिप्ट समर्थन नहीं
2. बड़े पैमाने पर, हार्ड-टू-सपोर्ट घटक
3. कोड का पुन: उपयोग करने के लिए एक सरल पैटर्न का अभाव

प्रारंभ में, टीएस का समर्थन करने के लिए कक्षाएं जोड़ने की योजना बनाई गई थी। लेकिन Vue टीम समस्याओं में भाग गई:

• इस के साथ रंगमंच की सामग्री और अन्य विशेषताओं को मिलाकर समस्याग्रस्त है
• TC39 में ES6 कक्षाओं के लिए सज्जाकार अस्थिर हैं

इवान की टीम ने TC39 विशेषज्ञों से मदद का अनुरोध किया और पता चला कि एक समान कार्यान्वयन प्लगइन्स के साथ संघर्ष कर सकता है जो विभिन्न प्रॉप्स और विशेषताओं को Vue संदर्भ में मिलाता है।

संभावित रूप से, इन समस्याओं को सज्जाकारों द्वारा हल किया जा सकता था, लेकिन वे अभी भी विकास के अधीन हैं।

रचना एपीआई

Vue टीम रिएक्ट हुक से प्रेरित थी और एक समान एपीआई बनाने का फैसला किया। यह वैकल्पिक है और विकास और चर्चा के अधीन है, इसलिए कुछ नाम बदल सकते हैं।
इस परिवर्तन की मुख्य अवधारणा घटक कोड को अधिक तार्किक रूप से व्यवस्थित करना है, इसे शब्दार्थ ब्लॉकों में तोड़ना है। आप प्रलेखन में रचना एपीआई के बारे में अधिक पढ़ सकते हैं।

Vue 3 का उपयोग करने का एक उदाहरण। एक घटक तार्किक कार्यों में विभाजित है, जिसके अंदर आप प्रतिक्रियाशीलता और जीवन चक्र हुक का उपयोग कर सकते हैं।

कंपोजीशन API से नए हुक आयात करें:

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

हम एक और फ़ंक्शन क्रिएट करते हैं , जिसमें काउंटर और जानवर के नाम के साथ वेतन वृद्धि और राज्य पद्धति शामिल है। गेटटाइप विधि टेम्पलेट से जानवर का नाम गुजरता है।

 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 काउंटर और 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> 

पुराने एपीआई को तोड़े बिना सेटअप के अंदर नए हुक का उपयोग किया जाता है। ध्यान दें कि onMounted एकल घटक जीवन चक्र हुक को संदर्भित करता है।

इस एपीआई के कई फायदे हैं:

• जीवनचक्र के हुक एक दूसरे को रगड़ते नहीं हैं
• गुणों का स्पष्ट स्रोत
• कोई अतिरिक्त घटक उदाहरण नहीं बनाए गए हैं

निष्कर्ष

Vue 3 में सबसे महत्वपूर्ण बदलाव ऊपर सूचीबद्ध हैं। अधिकांश सुधार कंपाइलर द्वारा उत्पन्न कोड के हुड के नीचे छिपे होंगे।

प्रमुख सुधार:

• जेएस संकलक के लिए उत्पन्न कोड इष्टतम है
• निर्मित बंडल आसान
• बेहतर पैचिंग एल्गोरिथ्म के लिए माता-पिता / बच्चे के घटकों का धन्यवाद

Vue ने खुद को सबसे तेज और सबसे इष्टतम रूपरेखाओं में से एक के रूप में स्थापित किया है। नया संस्करण और भी तेज और आसान हो जाएगा। Vue 3 आज के मोबाइल और प्रदर्शन उन्मुख वेब के लिए बहुत अच्छा है। भविष्य के परिवर्तनों पर टिप्पणियाँ आधिकारिक RFC (टिप्पणियों के लिए अनुरोध) में छोड़ी जा सकती हैं।
PS टाइपिंग सही करने के लिए धन्यवाद।