Vue 3.5 cuts reactivity memory 56%, adds lazy hydration

WHY IT MATTERS: Vue 3.5 is a minor release you can adopt without breaking changes, but the cumulative performance and developer experience improvements are substantial enough to justify upgrading this sprint. The reactivity system now uses 56% less memory and handles large deeply reactive arrays up to 10 times faster, which directly improves runtime performance in data-heavy dashboards and tables. For teams running server-side rendering, the new APIs fix long-standing hydration mismatch headaches and give you fine-grained control over when async components hydrate on the client.

WHAT CHANGED: The reactivity engine was refactored to resolve stale computed values and memory leaks during SSR while improving tracking speed for large arrays. Reactive props destructure is now stable and on by default, so you can write const { count = 0 } = defineProps() instead of wrapping withDefaults, though you must wrap destructured variables in getters when passing them to watch or composables. SSR improvements include lazy hydration strategies such as hydrateOnVisible for async components, the useId() hook for generating stable IDs across server and client, and the data-allow-mismatch attribute to suppress warnings when client and server values inevitably differ. Custom elements built with Vue now support mounting without Shadow DOM, accessing the host element via useHost() and this.$host, and injecting styles with a configurable nonce. Other additions include useTemplateRef(), deferred Teleport, and onWatcherCleanup().

WHAT TO WATCH: Nuxt is already building higher-level syntax sugar on top of the lazy hydration API, so expect cleaner framework-level patterns soon. If you maintain component libraries or design systems, test the new custom element options and evaluate whether shadowless mode simplifies integration. Teams on Vue 3 should plan to upgrade and remove withDefaults boilerplate, but note that destructured props require getter wrappers for reactivity in composables.

Source: Vue Blog