Vue JavaScript framework boosts reactivity system

Vue 3.5, an update to the popular “progressive” JavaScript framework, emphasizes improvements to the platform’s reactivity system, for better performance and improved memory usage.

Vue 3.5, described as a minor release with no breaking changes, was announced September 1. However, the release includes a major refactor of the reactivity system that boosts performance and significantly improves memory usage (-56%) with no behavior changes, Vue creator Evan You wrote in a blog post.

The Vue 3.5 release also resolves stale computed values and hanging memory issues caused by hanging computes during SSR (server-side rendering). Additionally, reactivity tracking has been optimized for large, deeply reactive arrays, making these operations as much as 10x faster in some cases. Reactive props destructure, meanwhile, has been stabilized and now is enabled by default. Variables destructured from a defineProps call in <script setup> now are reactive. This simplifies declaring props with default values, You said.

For SSR in Vue 3.5, async components now can control when they should be hydrated, by specifying a strategy through the hydrate option of the defineAsyncComponent() API. Vue 3.5 also fixes longstanding issues pertaining to the defineCustomElement() API, adding new capabilities for authoring custom elements.

Other features in Vue 3.5 include a new way of obtaining Template Refs via the useTemplateRef() API  and the introduction of a defer prop for <Teleport>, which mounts it after the current render cycle. And Vue 3.5 introduces a globally imported API, onWatcherCleanup(), to register cleanup callbacks in watchers.

Vue 3.5 has been followed up this week with versions 3.5.1, with bug fixes, and 3.5.2, with a compiler-core feature to parse modifiers as an expression to provide location data.