Vue 3.5 "Tengen Toppa Gurren Lagann" रिलीज़
(blog.vuejs.org)- इस माइनर रिलीज़ में आंतरिक सुधार और उपयोगी नए फीचर्स शामिल हैं, और compatibility तोड़ने वाले कोई बदलाव नहीं हैं
Reactivity सिस्टम ऑप्टिमाइज़ेशन
- Vue के reactive सिस्टम को बड़े पैमाने पर refactor किया गया है, जिससे performance बेहतर हुई है और memory usage (-56%) कम हुआ है, जबकि व्यवहार में कोई बदलाव नहीं है
- इस refactor से SSR के दौरान computed values और memory से जुड़ी समस्याएँ हल हुई हैं
- 3.5 में बड़े और गहरे reactive arrays के लिए reactivity tracking को optimize किया गया है, जिससे कुछ मामलों में यह 10 गुना तक तेज़ हो गया है
Reactive Props Destructure
- reactive Props destructure को 3.5 में stable कर दिया गया है और यह अब डिफ़ॉल्ट रूप से enabled है
<script setup>मेंdefinePropsकॉल से destructure किए गए variables अब reactive हैं- यह फीचर JavaScript के native default value syntax का उपयोग करके default values वाले props घोषित करना काफी सरल बना देता है
SSR सुधार
Lazy Hydration
- async components अब
defineAsyncComponent()API केhydrateविकल्प के ज़रिए strategy तय करके hydration का समय नियंत्रित कर सकते हैं
useId()
useId()एक API है जिसका उपयोग server और client rendering में स्थिर रूप से गारंटी किए गए, application-स्तर के unique ID बनाने के लिए किया जा सकता है- इसका उपयोग form elements और accessibility attributes के लिए ID बनाने में किया जा सकता है, और इसे SSR applications में hydration mismatch के बिना इस्तेमाल किया जा सकता है
data-allow-mismatch
- जब client value का server value से अलग होना अनिवार्य हो (जैसे: तारीख), तब
data-allow-mismatchattribute से hydration mismatch warning को दबाया जा सकता है - attribute को value देकर अनुमत mismatch के प्रकार को सीमित भी किया जा सकता है (
text,children,class,style,attribute)
Custom Element सुधार
- 3.5
defineCustomElement()API से जुड़ी कई लंबे समय से चली आ रही समस्याओं को ठीक करता है और Vue के साथ custom elements लिखने के लिए कई नए फीचर्स जोड़ता है configureAppविकल्प के माध्यम से custom elements के लिए app configuration का समर्थनuseHost(),useShadowRoot()औरthis.$hostAPI जोड़कर custom elements के host element और shadow root तक पहुँचshadowRoot: falseपास करके Shadow DOM के बिना custom elements को mount करने का समर्थनnonceविकल्प देने का समर्थन, जिसे custom elements द्वारा inject किए गए<style>टैग से जोड़ा जाता है
अन्य उल्लेखनीय फीचर्स
useTemplateRef()
- 3.5
useTemplateRef()API के माध्यम से template refs प्राप्त करने का एक नया तरीका पेश करता है - 3.5 से पहले variable name को static
refattribute से मिलाने वाले सामान्य refs का उपयोग करने की सिफारिश की जाती थी - पिछला तरीका static
refattribute तक सीमित था क्योंकि compiler कोrefattribute का विश्लेषण करने में सक्षम होना पड़ता था - इसके विपरीत,
useTemplateRef()runtime string ID के माध्यम से refs को match करता है, इसलिए यह बदलने वाले ID के लिए dynamic ref binding का समर्थन करता है
Deferred Teleport
- built-in
<Teleport>component की एक ज्ञात सीमा यह थी कि teleport component के mount होने के समय target element का मौजूद होना ज़रूरी था - इसकी वजह से users, Vue द्वारा render किए गए किसी दूसरे element में content को teleport नहीं कर पाते थे
- 3.5 में
<Teleport>के लिएdeferprop जोड़ा गया है, जो current render cycle के बाद mount होता है, इसलिए अब यह काम करता है
onWatcherCleanup()
- 3.5 watchers में cleanup callback register करने के लिए globally imported API
onWatcherCleanup()पेश करता है
3 टिप्पणियां
इस रिलीज़ में असल में component development करते समय सुविधा काफ़ी बढ़ गई है।
लगता है इस वर्ज़न का नाम "Tengen Toppa Gurren Lagann" है। (कमाल की कृति है! मुझे लगता है मैंने जो Gainax का काम देखा है, उसमें यह आख़िरी था)
Vue ने परंपरागत रूप से? anime शीर्षकों का इस्तेमाल किया है। 1.0 था Evangelion, 2.0 था Ghost in the Shell, 3.0 था One Piece, 3.3 था Rurouni Kenshin, 3.4 था Slam Dunk
https://en.wikipedia.org/wiki/Vue.js#Versions