Vue 3.5 cuts reactivity memory 56%, adds lazy hydration
Vue 3.5 drops reactivity memory 56% and large arrays up to 10x faster with no breaks. Stable reactive props destructure kills withDefaults boilerplate, while lazy hydration and useId() fix SSR pain points.
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.
Interview question
When using Vue 3.5's stable reactive props destructure, what must you do to keep a destructured prop reactive when passing it to watch or a composable?
- a.Convert it to a ref using toRef()
- b.Use withDefaults as a fallback wrapper
- c.Pass it directly; destructured props retain reactivity automatically
- d.Wrap the variable in a getter functionCorrect
Why? this is the answer
Vue 3.5 requires wrapping destructured props in getters when passing them to watch or composables to preserve reactivity. Passing them directly severs the reactive link, and withDefaults is the old boilerplate this feature replaces.
Just read this? Test yourself on what you have been reading.
Read the original → blog.vuejs.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on vue — each one lists the topics its interview covers.
See open roles