Earlier this month, a new version of the popular Vue.js framework was introduced – Vue 3.5. This update brings a number of significant improvements that will delight developers as well as users of Vue applications. It promises higher performance and better efficiency – from optimizing the reactive system to improved server-side rendering (SSR). Why do we recommend deploying it right now? Read on!
Optimization of the reactive system
One of the most significant improvements in Vue 3.5 is the optimization of the reactive system. Thanks to the modifications in memory management, its use has been streamlined by up to 50%, which significantly reduces resource requirements. At the same time, reactivity has accelerated dramatically – up to ten times in certain cases! This improvement will certainly be appreciated especially by developers who need high performance in demanding data operations.
SSR enhancements: Lazy Hydration and useId()
Vue 3.5 brings several important changes in the field of SSR as well. Among the most interesting is the support of lazy hydration – a technique that allows you to “hydrate” the components gradually. This means that they’re activated only when they’re really needed, which contributes to higher application performance.
Another key innovation is the new useId() API, which solves the problem of generating unique identifiers in SSR as well as on the client. This mechanism allows for avoiding collisions of identifiers, which ensures that the HTML generated on the server coincides with the reactive HTML on the client, without the need for additional recalculation.
News for Custom Elements
Developers working with Custom Elements will surely appreciate a few more interesting improvements:
- The ability to disable shadow DOM for custom elements through shadowRoot: false settings has been added, which allows more flexibility when working with the DOM and styling.
- New APIs – the aforementioned useHost(), useShadowRoot(), and this.$host. – make it easier to access host elements and shadow root.
- Developers now have the option to add nonce value to the <style> tag, which increases application security by allowing them to work better with Content Security Policy.
- Thanks to the new configureApp interface, developers can easily configure the application when defining a custom element. This allows better control over the behavior and settings of custom elements in the application.
For a more detailed overview of all the news and improvements, you can check out the official Vue.js blog.
The conclusion is clear – Vue 3.5 is a huge step forward. If you’re not already using it in your projects, maybe now is the right time to change that. This version doesn’t bring any breaking changes, which means that the deployment should be very simple and without the risk of disrupting functionality.
We’re currently fine-tuning minor problems with the types in the defineComponent and after solving them, we plan to implement Vue 3.5 into projects for the Dr.Max client. We’ll inform you about the results of this update in our Digital Inspirations.
