{"id":7463,"date":"2024-10-14T12:54:22","date_gmt":"2024-10-14T10:54:22","guid":{"rendered":"https:\/\/blog.bart.sk\/en\/?p=7463"},"modified":"2024-10-16T10:35:00","modified_gmt":"2024-10-16T08:35:00","slug":"vue-3-5-10x-faster-reactivity-and-50-more-efficient-memory-usage","status":"publish","type":"post","link":"https:\/\/blog.bart.sk\/en\/vue-3-5-10x-faster-reactivity-and-50-more-efficient-memory-usage\/","title":{"rendered":"Vue 3.5: 10x Faster Reactivity and 50% More Efficient Memory Usage"},"content":{"rendered":"\n<p><strong>Earlier this month, a new version of the popular Vue.js framework was introduced \u2013 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 \u2013 from optimizing the reactive system to improved server-side rendering (SSR). Why do we recommend deploying it right now? Read on!<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Optimization of the reactive system<\/strong><\/h2>\n\n\n\n<p>One of the most significant improvements in Vue 3.5 is the optimization of the reactive system. <strong>Thanks to the modifications in memory management, its use has been streamlined by up to 50%, which significantly reduces resource requirements.<\/strong> At the same time, reactivity has accelerated dramatically \u2013 up to ten times in certain cases! This improvement will certainly be appreciated especially by developers who need high performance in demanding data operations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>SSR enhancements: Lazy Hydration and useId()<\/strong><\/h2>\n\n\n\n<p>Vue 3.5 brings several important changes in the field of SSR as well. <strong>Among the most interesting is the support of lazy hydration \u2013 a technique that allows you to &#8220;hydrate&#8221; the components gradually.<\/strong> This means that they&#8217;re activated only when they&#8217;re really needed, which contributes to higher application performance.<\/p>\n\n\n\n<p>Another key innovation is the new <strong>useId<\/strong><strong>()<\/strong> API, which solves the problem of generating unique identifiers in SSR as well as on the client. <strong>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.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>News for Custom Elements<\/strong><\/h2>\n\n\n\n<p>Developers working with Custom Elements will surely appreciate a few more interesting improvements:<\/p>\n\n\n\n<ul>\n<li><strong>The ability to disable <\/strong><strong>shadow DOM<\/strong><strong> for custom elements<\/strong> through shadowRoot: false settings has been added, which allows more flexibility when working with the DOM and styling.&nbsp;<\/li>\n\n\n\n<li><strong>New APIs<\/strong> \u2013 the aforementioned useHost(), useShadowRoot(), and this.$host. \u2013 <strong>make it easier to access host elements and shadow root<\/strong>.&nbsp;<\/li>\n\n\n\n<li><strong>Developers now have the option to add nonce value to the <\/strong><strong>&lt;style&gt;<\/strong><strong> tag<\/strong>, which increases application security by allowing them to work better with Content Security Policy.<\/li>\n\n\n\n<li><strong>Thanks to the new configureApp interface, developers can easily configure the application<\/strong> when defining a custom element. This allows better control over the behavior and settings of custom elements in the application.<\/li>\n<\/ul>\n\n\n\n<p>For a more detailed overview of all the news and improvements, you can check out the <a href=\"https:\/\/blog.vuejs.org\/posts\/vue-3-5\">official Vue.js blog.&nbsp;<\/a><\/p>\n\n\n\n<p>The conclusion is clear \u2013 <strong>Vue 3.5 is a huge step forward<\/strong>. If you&#8217;re not already using it in your projects, maybe now is the right time to change that. <strong>This version doesn&#8217;t bring any breaking changes, which means that the deployment should be very simple and without the risk of disrupting functionality.<\/strong>&nbsp;<\/p>\n\n\n\n<p>We&#8217;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&#8217;ll inform you about the results of this update in our <a href=\"https:\/\/blog.bart.sk\/kategoria\/digitalne-inspiracie\/\">Digital Inspirations<\/a>.<\/p>\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><strong>Are you interested in development? Then you could also enjoy other articles on this topic!<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-layout-1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/blog.bart.sk\/en\/category\/development\/\">I want to read them<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Earlier this month, a new version of the popular Vue.js framework was introduced \u2013 Vue 3.5. This update&hellip;","protected":false},"author":22,"featured_media":7464,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":""},"categories":[199],"tags":[556,560,559,558,565],"_links":{"self":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/7463"}],"collection":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/comments?post=7463"}],"version-history":[{"count":1,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/7463\/revisions"}],"predecessor-version":[{"id":7465,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/7463\/revisions\/7465"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media\/7464"}],"wp:attachment":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media?parent=7463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/categories?post=7463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/tags?post=7463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}