पिछले हफ्ते Vue.js लंदन में, मैंने इस बारे में बात की कि Vue के अगले प्रमुख संस्करण में क्या होगा। यह पोस्ट योजना का विस्तृत विवरण प्रदान करती है।

नया प्रमुख संस्करण क्यों है?

Vue 2.0 को ठीक दो साल पहले जारी किया गया था (जैसा कि समय मक्खियों!)। इस समय के दौरान, Vue कोर पिछड़े संगत बना रहा और उसे 5 मामूली रिलीज़ मिलीं। हमने कई विचारों को संचित किया है जिससे सुधार होगा, लेकिन उन्हें लागू नहीं किया गया है क्योंकि वे पिछड़े संगतता के टूटने का कारण बनेंगे। उसी समय, जावास्क्रिप्ट पारिस्थितिकी तंत्र और भाषा स्वयं तेजी से विकसित हो रही है। उन्नत उपकरण हैं जो वर्कफ़्लो में सुधार कर सकते हैं और कई नई भाषा सुविधाएँ जो सरल, अधिक पूर्ण, और उन समस्याओं के अधिक कुशल समाधानों को सुविधाजनक बना सकती हैं जिन्हें Vue हल करने की कोशिश कर रहा है। और भी दिलचस्प यह है कि हम देखते हैं कि ES2015 का समर्थन प्रमुख ब्राउज़रों के लिए बेहतर और बेहतर हो रहा है।

Vue 3.0 का उद्देश्य Vue कोर को छोटा, तेज और अधिक शक्तिशाली बनाने के लिए इन नई भाषा सुविधाओं का उपयोग करना है। Vue 3.0 वर्तमान में प्रोटोटाइप के तहत है, और हमने पहले ही संस्करण 2.x के करीब रनटाइम लागू कर दिया है। नीचे सूचीबद्ध कई तत्व या तो पहले से ही लागू हैं या पुष्टि की गई है कि यह संभव है। आइटम जो अभी तक लागू नहीं हुए हैं या अभी भी योजना के चरण में हैं, उन्हें (*) के साथ चिह्नित किया गया है।

विवरण

शीर्ष स्तर एपीआई परिवर्तन

TL; DR: API रेंडर फंक्शन को छोड़कर सब कुछ और स्कोप्ड स्लॉट्स सिंटैक्स या तो एक समान रहता है या संगतता असेंबली के माध्यम से संस्करण 2.x के साथ संगत हो सकता है।

चूंकि यह एक प्रमुख संस्करण है, इसलिए कुछ बदलाव होंगे। हालाँकि, हम पिछड़ी संगतता के बारे में गंभीर हैं, इसलिए हम इन परिवर्तनों की एक सूची जल्द से जल्द प्रकाशित करना चाहते हैं।

यहाँ वर्तमान नियोजित सार्वजनिक एपीआई परिवर्तन हैं:

• टेम्पलेट्स का सिंटैक्स 99% समान रहेगा। स्कोप किए गए स्लॉट के सिंटैक्स में छोटे बदलाव हो सकते हैं, लेकिन इसके अलावा, हम टेम्प्लेट के लिए कुछ भी बदलने की योजना नहीं बनाते हैं।
• 3.0 शुरू में वर्ग-आधारित घटकों का समर्थन करेगा, एक एपीआई प्रदान करने के लक्ष्य के साथ जो कि मूल ES2015 में उपयोग करने के लिए अच्छा है, बिना ट्रांसप्लिकेशन या स्टेज-एक्स कार्यक्षमता के किसी भी साधन की आवश्यकता के। अधिकांश वर्तमान मापदंडों में क्लास-आधारित एपीआई में एक उचित मानचित्रण होगा। स्टेज-एक्स फीचर्स, जैसे कि क्लास फील्ड और डेकोरेटर, अभी भी वैकल्पिक रूप से उपयोग किए जा सकते हैं। इसके अलावा, एपीआई को टाइपस्क्रिप्ट को ध्यान में रखकर बनाया गया है। 3.x कोडबेस स्वयं टाइपस्क्रिप्ट में लिखा जाएगा और बेहतर टाइपस्क्रिप्ट समर्थन प्रदान करेगा। (हालांकि, एप्लिकेशन में टाइपस्क्रिप्ट का उपयोग करना अभी भी पूरी तरह से वैकल्पिक है)।
• 2.x वस्तुओं पर आधारित अवयवों को संबंधित वर्ग को वस्तु के आंतरिक रूपांतरण द्वारा समर्थित किया जाना जारी रहेगा।
• मिश्रण का समर्थन जारी रहेगा। *
• शीर्ष-स्तर एपीआई प्लगइन्स स्थापित करते समय Vue प्रोटोटाइप के साथ वैश्विक हस्तक्षेप से बचने के लिए परिवर्तन प्राप्त करने की संभावना है। इसके बजाय, प्लगइन्स को लागू किया जाएगा और घटक पेड़ से जुड़ा होगा। इससे उन घटकों का परीक्षण करना आसान हो जाएगा जो विशिष्ट प्लगइन्स पर निर्भर करते हैं, और आपको एक ही पृष्ठ पर विभिन्न प्लगइन्स के साथ कई Vue एप्लिकेशन माउंट करने की अनुमति देते हैं, लेकिन एक ही Vue रनटाइम का उपयोग करते हुए। *
• कार्यात्मक घटक अंततः सरल कार्य हो सकते हैं - किसी भी मामले में, अतुल्यकालिक घटकों को अब एक सहायक फ़ंक्शन का उपयोग करके स्पष्ट रूप से बनाया जाना चाहिए।
• जो भाग सबसे अधिक परिवर्तन प्राप्त करेगा वह है रेंडरिंग फ़ंक्शंस में उपयोग किया जाने वाला वर्चुअल डोम। हम वर्तमान में पुस्तकालयों के मुख्य लेखकों से प्रतिक्रिया एकत्र कर रहे हैं और अधिक विस्तृत जानकारी साझा करेंगे, क्योंकि हम परिवर्तनों में आश्वस्त हैं, लेकिन अभी तक आप अपने आवेदन में स्व-लिखित (गैर-जेएसएक्स) प्रतिपादन कार्यों पर बहुत अधिक भरोसा नहीं करते हैं, यह एक काफी सरल प्रक्रिया होनी चाहिए।

सोर्स कोड आर्किटेक्चर

TL; DR: अलग-अलग आंतरिक मॉड्यूल, टाइपस्क्रिप्ट और कोड बेस में सुधार हुआ, जो योगदान करने के लिए आसान है।

हम एक क्लीनर और अधिक सुविधाजनक वास्तुकला के लिए स्क्रू से Vue को फिर से लिख रहे हैं, विशेष रूप से, चीजों को आसान बनाने की कोशिश कर रहे हैं। हम जटिलता की मात्रा को अलग करने के लिए अलग-अलग पैकेजों में कुछ आंतरिक कार्यों का उल्लंघन करते हैं। उदाहरण के लिए, पर्यवेक्षक मॉड्यूल स्वयं का पैकेज बन जाएगा, जिसमें उसका अपना सार्वजनिक एपीआई और परीक्षण होगा। ध्यान दें कि यह फ्रेमवर्क स्तर API को प्रभावित नहीं करता है: आपको Vue का उपयोग करने के लिए कई पैकेज से व्यक्तिगत मॉड्यूल को मैन्युअल रूप से आयात करने की आवश्यकता नहीं है। इसके बजाय, इन आंतरिक पैकेजों का उपयोग करके अंतिम Vue पैकेज बनाया जाता है।

कोडबेस भी अब टाइपस्क्रिप्ट में लिखा गया है। यद्यपि यह टाइपस्क्रिप्ट ज्ञान को नए कोडबेस में योगदान करने के लिए एक पूर्वापेक्षा बनाता है, हम मानते हैं कि प्रकार की जानकारी और आईडीई समर्थन वास्तव में अनुचर के लिए एक सार्थक योगदान करना आसान बना देगा।

पर्यवेक्षक और अनुसूचक को अलग-अलग पैकेजों में अलग करना भी इन भागों के वैकल्पिक कार्यान्वयन के साथ प्रयोग करना आसान बनाता है। उदाहरण के लिए, हम IE11 के साथ संगत एक पर्यवेक्षक पैटर्न को लागू कर सकते हैं जो एक ही एपीआई या वैकल्पिक अनुसूचक के साथ है जो डाउनटाइम के दौरान ब्राउज़र में आउटपुट के लिए requestIdleCallback का उपयोग करता है। *

अवलोकन तंत्र

टीएल; डीआर: अधिक व्यापक, सटीक, कुशल और डीबग्ड प्रतिक्रियाशीलता ट्रैकिंग और अवलोकन योग्य वस्तुओं को बनाने के लिए एपीआई।

Vue 3.0 एक प्रॉक्सी-आधारित पर्यवेक्षक कार्यान्वयन के साथ जहाज जाएगा जो प्रतिक्रियात्मकता ट्रैकिंग प्रदान करता है। यह Object.defineProperty आधार पर वर्तमान Vue 2 कार्यान्वयन की कई सीमाओं को हटा देता है:

• गुण जोड़ें / निकालें का पता लगाना
• सरणी / .Length सूचकांक उत्परिवर्तन का पता लगाने
• समर्थन मानचित्र, सेट, कमजोर नक्शा और कमजोर

नए पर्यवेक्षक के निम्नलिखित फायदे भी हैं:

• अवलोकनीय वस्तुओं को बनाने के लिए एक खुला एपीआई। इसका मतलब छोटे परिदृश्यों के लिए कई घटकों के प्रबंधन के लिए एक सरल समाधान है।
• डिफ़ॉल्ट रूप से आलसी अवलोकन। 2.x में, कोई भी प्रतिक्रियाशील डेटा, चाहे कितना भी बड़ा हो, स्टार्टअप पर नज़र रखी जाएगी। यदि आप प्रतिक्रियाशील डेटा का एक बड़ा सेट है, तो आवेदन शुरू करते समय यह ध्यान देने योग्य ओवरहेड का कारण बन सकता है। 3.x में, आपको केवल उस डेटा को ट्रैक करने की आवश्यकता होगी जो आपके आवेदन के शुरू में दिखाई देने वाले हिस्से को रेंडर करने के लिए उपयोग किया जाता है, इस तथ्य का उल्लेख नहीं करने के लिए कि अवलोकन स्वयं बहुत तेज है।
• अधिक सटीक परिवर्तन सूचना। उदाहरण: 2.x में, Vue.set का उपयोग करके एक नई संपत्ति को जबरन जोड़ना किसी भी पर्यवेक्षक को फिर से मूल्यांकन करने के लिए ऑब्जेक्ट पर निर्भर करेगा। 3.x में, केवल वे पर्यवेक्षक जो इस विशेष संपत्ति पर भरोसा करते हैं, को सूचित किया जाएगा।
• अपरिवर्तनीय अवलोकनीय वस्तुएं: हम किसी ऑब्जेक्ट के "अपरिवर्तनीय" संस्करण बना सकते हैं जो संलग्न गुणों के साथ भी म्यूटेशन को रोकता है, जब तक कि सिस्टम इसे अस्थायी रूप से अंदर नहीं खोलता है। इस तंत्र का उपयोग उत्परिवर्तनों के बाहर प्रॉप्स या वुक्स राज्य के पेड़ों को मुक्त करने के लिए किया जा सकता है।
• बेहतर डिबगिंग क्षमताओं: हम सही तरीके से ट्रैक कर सकते हैं कि कब और क्यों घटक renderTracked होता है या नया renderTracked और renderTriggered ।

अन्य सुधार

टीएल; डीआर: छोटे, तेज, पेड़-हिलाने के अनुकूल, स्निपेट्स और पोर्टल्स, रेंडर एपीआई।

• कम: नए कोडबेस को जमीन से पेड़ के झटकों के अनुकूल बनाया गया है । अंतर्निहित घटकों ( <transition> , <keep-alive> ) और सहायक निर्देशों ( v-model ) जैसे कार्य अब मांग पर आयात किए जाते हैं। नए रनटाइम लाइब्रेरी का आकार gzip में <10kb है। हम भविष्य में अधिक अंतर्निहित कार्यों की पेशकश भी कर सकते हैं, उन उपयोगकर्ताओं के लिए भारी पेलोड का सहारा लिए बिना जो उनका उपयोग नहीं करते हैं।
• तेज़: प्रारंभिक परीक्षणों में, हम सभी क्षेत्रों में प्रदर्शन में 100% वृद्धि देखते हैं, जिसमें कच्चा अपडेट और वर्चुअल डोम फिक्स शामिल हैं (हमने इनफर्नो से बहुत सारी चालें सीखीं, वर्चुअल डोम का सबसे तेज़ कार्यान्वयन), घटक की आवृत्ति का पता लगाना और डेटा को ट्रैक करना। 3.0 आपके आवेदन के लोड होने पर जावास्क्रिप्ट में खर्च किए गए आधे समय को कम कर देगा।
• टुकड़े और पोर्टल: आकार में कमी के बावजूद, 3.0 टुकड़े के लिए अंतर्निहित समर्थन के साथ आता है (एक घटक जो कई रूट नोड लौटाता है) और पोर्टल्स (डोम के दूसरे भाग में एक उपप्रकार प्रस्तुत करना, और घटक के अंदर नहीं)।
• बेहतर स्लॉट तंत्र: संकलक का उपयोग करके बनाए गए सभी स्लॉट अब फ़ंक्शन हैं और जब बच्चे के घटक को प्रस्तुत किया जाता है तो उसे कॉल किया जाता है। यह सुनिश्चित करता है कि स्लॉट में निर्भरताएं माता-पिता के बजाय बच्चे के लिए निर्भरता के रूप में एकत्र की जाती हैं। इसका मतलब है कि:
  
  1. स्लॉट की सामग्री को बदलते समय, केवल बाल घटक को फिर से तैयार किया जाता है
  2. जब मूल घटक को फिर से तैयार किया जाता है, तो बच्चे को नहीं करना चाहिए, अगर स्लॉट की इसकी सामग्री नहीं बदली गई है। यह परिवर्तन घटक ट्री स्तर पर परिवर्तनों का अधिक सटीक पता लगाने की पेशकश करता है, इसलिए कम अनावश्यक पुन: रेंडरिंग हैं!
• रेंडर एपीआई: नई ईएस क्लास एपीआई वेक्स और नेटिवस्क्रिप्ट वीयू जैसी परियोजनाओं के लिए प्रतिपादन को सरल बनाएगी । विभिन्न उद्देश्यों के लिए कस्टम रेंडर फ़ंक्शन बनाना भी आसान बना देगा।

संकलक सुधार *

टीएल; डीआर: ट्री-शेकिंग फ्रेंडली आउटपुट, एओटी ऑप्टिमाइज़ेशन, बेहतर एरर की जानकारी के साथ पार्सर और सोर्स मैप्स के लिए सपोर्ट।

• ट्री-विशिष्ट मिडलवेयर घटकों के संदर्भ का उपयोग करते समय, अतिरिक्त फ़ंक्शन का उपयोग करने वाले टेम्पलेट ईएस मॉड्यूल के सिंटैक्स का उपयोग करके इन कार्यों को आयात करने वाले कोड उत्पन्न करेंगे। इस प्रकार, अप्रयुक्त वैकल्पिक फ़ंक्शन बंडल से हटा दिए जाते हैं।
• नए वर्चुअल डोम कार्यान्वयन में सुधार के कारण, हम अधिक कुशल संकलन अनुकूलन भी कर सकते हैं, जैसे कि स्थिर पेड़ उठाना, स्थिर संपत्ति जुटाना, बच्चे के तत्वों को सामान्य करने के लिए संकलक संकेत, वीएनओडी बनाने के तेज़ तरीके आदि।
• हम टेम्पलेट संकलन त्रुटि जानकारी को बेहतर बनाने के लिए पार्सर को फिर से लिखने की योजना बनाते हैं। यह भी स्रोत के नक्शे के लिए समर्थन करने के लिए नेतृत्व करना चाहिए, और नए पार्सर eslint-plugin-vue और आईडीई जैसे तीसरे पक्ष के उपकरणों के एकीकरण के लिए आधार के रूप में काम कर सकता है।

IE11 समर्थन *

टीएल; डीआर: इसका समर्थन किया जाएगा, लेकिन एक ही विधानसभा में एक ही Vue 2.x प्रतिक्रियात्मक प्रतिबंध के साथ।

वर्तमान में नया कोड आधार केवल सदाबहार ब्राउज़रों के लिए है और इसमें ES2015 के लिए बुनियादी समर्थन शामिल है। लेकिन अफसोस, हम जानते हैं कि हमारे कई उपयोगकर्ताओं को अभी भी निकट भविष्य के लिए IE11 का समर्थन करने की आवश्यकता है। ES2015 में उपयोग की जाने वाली अधिकांश विशेषताओं को IE11 के लिए फिर से लिखा जा सकता है / पॉलिश किया जा सकता है, प्रॉक्सी के अपवाद के साथ। हमारी योजना एक ही एपीआई के साथ एक वैकल्पिक पर्यवेक्षक को लागू करना है, लेकिन पुराने Object.defineProperty API का उपयोग करना है। इस कार्यान्वयन का उपयोग करके Vue 3.x का एक अलग बिल्ड उपलब्ध होगा। हालाँकि, यह बिल्ड Vue 2.x के समान परिवर्तनों से गुजरना होगा, और इस तरह "आधुनिक" बिल्ड 3.x के साथ पूरी तरह से संगत नहीं है। हम जानते हैं कि यह पुस्तकालयों के लेखकों के लिए कुछ असुविधा का परिचय देता है, क्योंकि उन्हें दो अलग-अलग बिल्ड के लिए अनुकूलता के बारे में जानने की आवश्यकता होती है, लेकिन जब हम इस स्तर पर पहुंचते हैं तो हम निश्चित रूप से इस मुद्दे पर स्पष्ट सिफारिशें प्रदान करेंगे।

हम ऐसा कैसे करना चाहते हैं?

सबसे पहले, यद्यपि हम आज इसकी घोषणा कर रहे हैं, फिर भी हमारे पास कार्रवाई की अंतिम योजना नहीं है। फिलहाल, हम जानते हैं कि हम क्या कदम उठाएंगे:

1. आंतरिक प्रतिक्रिया

यह वह चरण है जिसमें हम अभी हैं। वर्तमान में, हमारे पास पहले से ही एक प्रोटोटाइप है जिसमें एक नया पर्यवेक्षक कार्यान्वयन, वर्चुअल डोम और घटक कार्यान्वयन शामिल है। हमने आंतरिक बदलावों पर प्रतिक्रिया प्रदान करने के लिए प्रभावशाली सामुदायिक परियोजनाओं के लेखकों के एक समूह को आमंत्रित किया और उन्हें आगे बढ़ने से पहले परिवर्तनों से खुश होना चाहेंगे। हम यह सुनिश्चित करना चाहते हैं कि पारिस्थितिक तंत्र में महत्वपूर्ण पुस्तकालय उसी समय तैयार हों जब हम 3.0 जारी करते हैं ताकि जो उपयोगकर्ता इन परियोजनाओं पर भरोसा करते हैं वे आसानी से उन्नयन कर सकें।

2. RFC के माध्यम से सार्वजनिक प्रतिक्रिया

जैसे ही हम नए डिजाइन में एक निश्चित स्तर का विश्वास हासिल करते हैं, प्रत्येक बदलाव के लिए हम एक विशेष RFC समस्या खोलेंगे, जिसमें शामिल हैं:

• बदलाव का पैमाना
• बदलाव के आधार पर: हमें क्या मिलता है और क्या व्यापार बंद हो रहे हैं
• अद्यतन पथ: क्या इसे पूरी तरह से पिछड़े संगत तरीके से और किस मदद से प्रस्तुत किया जा सकता है?

हमें इन विचारों का अनुवाद करने में मदद करने के लिए व्यापक समुदाय से प्रतिक्रिया की प्रतीक्षा रहेगी।

3. 2.x और 2.x-next में संगत कार्य प्रविष्ट करना

हम 2.x के बारे में नहीं भूलते हैं! वास्तव में, हम उपयोगकर्ताओं को नए परिवर्तनों के लिए धीरे-धीरे आदी होने के लिए 2.x का उपयोग करने की योजना बनाते हैं। हम धीरे-धीरे opt-in एडेप्टर के माध्यम से 2.x में पुष्टि एपीआई परिवर्तन शुरू कर रहे हैं, और 2.x-next उपयोगकर्ताओं को प्रॉक्सी के आधार पर एक नए पर्यवेक्षक कार्यान्वयन का प्रयास करने की अनुमति देगा।

2.x में नवीनतम मामूली संस्करण LTS बन जाएगा और Vue 3.0 जारी होने पर 18 महीनों के लिए बग फिक्स और बग फिक्स प्राप्त करना जारी रखेगा।

4. अल्फा चरण

हम संकलक और सर्वर साइड 3.0 को खत्म कर देंगे और अल्फा रिलीज बनाना शुरू करेंगे। यह मुख्य रूप से छोटे अनुप्रयोगों में स्थिरता का परीक्षण करने के लिए होगा।

5. बीटा चरण

बीटा चरण में, हमारा मुख्य कार्य समर्थन पुस्तकालयों और उपकरणों जैसे कि Vue Router, Vuex, Vue CLI, Vue DevTools को अपडेट करना है और सुनिश्चित करें कि वे नए कर्नेल के साथ ठीक से काम करें। हम संस्करण 3.0 की तैयारी में मदद करने के लिए प्रमुख सामुदायिक पुस्तकालय लेखकों के साथ भी काम करेंगे।

6. आरसी चरण

जब हम एपीआई और कोड आधार की स्थिरता प्राप्त करते हैं, तो हम एपीआई को फ्रीज करने के साथ आरसी चरण में प्रवेश करेंगे। इस बिंदु पर, हम एक कंप्रेटर बिल्ड: बिल्ड 3.0 पर भी काम करेंगे, जिसमें एपीआई 2.x के लिए संगतता स्तर शामिल हैं। यह बिल्ड एक ध्वज के साथ भी आएगा जिसे आप अपने एप्लिकेशन में API 2.x का उपयोग करने के लिए वर्जन चेतावनी जारी करने में सक्षम कर सकते हैं। असेंबली मैपिंग का उपयोग आपके एप्लिकेशन को संस्करण 3.0 में अपग्रेड करने के लिए एक गाइड के रूप में किया जा सकता है।

7. IE11 विधानसभा

अंतिम संस्करण से पहले अंतिम कार्य IE11 के साथ एक असेंबली संगत होगा, जैसा कि ऊपर उल्लेख किया गया है।

8. अंतिम रिलीज

ईमानदारी से, हम नहीं जानते कि यह कब होगा, लेकिन शायद 2019 में। फिर से, हम विशिष्ट तिथियों का वादा करने के बजाय विश्वसनीय और स्थिर होने के बारे में अधिक परवाह करते हैं। बहुत काम होना बाकी है, लेकिन हम उत्साहित हैं कि आगे क्या होगा!