Overview
- 1Vue 3.5 (Sep 2024) is the latest stable release with major DX and performance improvements.
- 2Reactive Props Destructure lets you use `const { foo } = defineProps()` reactively — no more toRefs.
- 3useTemplateRef() replaces the old `ref="name"` + `const name = ref()` pattern.
- 4Lazy hydration for async components ships built-in: `hydrateOnVisible`, `hydrateOnInteraction`.
- 5Vue maintains its reputation as the easiest framework to learn while scaling to complex apps.
Key Features in 3.5
Composition API — composable, reusable logic with setup() and composables
Reactive Props Destructure — destructure defineProps() without losing reactivity
useTemplateRef() — typed, explicit template ref access
Lazy Hydration — hydrateOnVisible, hydrateOnIdle, hydrateOnInteraction strategies
Vue Vapor (experimental) — fine-grained reactivity without Virtual DOM
Built-in TypeScript support with full type inference in templates
Single File Components (SFC) with <script setup> shorthand
Use Cases
- →Progressive enhancement on existing HTML pages
- →Medium-to-large SPAs with Nuxt.js
- →Rapid prototyping and MVPs
- →Teams migrating from jQuery or plain JS
What's New in Vue 3.5
- Reactive Props Destructure is now stable — `const { count = 0 } = defineProps<{ count?: number }>()`
- useTemplateRef(key) — replaces `ref="x"` + `const x = ref(null)` pattern
- onWatcherCleanup() — registers cleanup logic inside watch callbacks
- watch() and watchEffect() can now be paused/resumed with .pause()/.resume()
- app.onUnmountError() — global error handler for component unmount
- Lazy hydration strategies for async components shipped as built-ins
- SSR dehydration performance improved by ~50% on large component trees
Composition API Essentials
- ref() for primitive reactive values; reactive() for objects
- computed() for derived values with automatic dependency tracking
- watch() and watchEffect() for side-effects and async operations
- Composables — `use` prefixed functions that encapsulate reusable logic
- provide/inject for dependency injection across component trees
- <script setup> compiles to optimised render functions with minimal boilerplate
Reactivity System
- Proxy-based reactivity tracks property access and mutation automatically
- toRef() and toRefs() unwrap nested reactive objects to template refs
- shallowRef() and shallowReactive() skip deep tracking for performance
- markRaw() excludes objects from reactivity (DOM nodes, large external data)
- triggerRef() manually triggers effect for shallowRef updates
- effectScope() groups effects for coordinated disposal (used by Pinia, VueUse)
Ecosystem — Nuxt, Pinia, VueUse
- Nuxt 3 — full-stack Vue framework with SSR, SSG, and hybrid rendering
- Pinia — official state management; replaces Vuex with a simpler store API
- Vue Router 4 — nested routes, dynamic segments, navigation guards
- VueUse — 200+ composables (useFetch, useDark, useStorage, useIntersectionObserver)
- Vite + @vitejs/plugin-vue — fastest dev server and optimised build
- Vitest — Vue-aware unit testing framework built on Vite
Frequently Asked Questions
What is Reactive Props Destructure in Vue 3.5?
Reactive Props Destructure allows you to write `const { count } = defineProps<{ count: number }>()` and have count remain reactive in the template and watchers. Previously, destructuring props broke reactivity and required toRefs(props).
Options API vs Composition API — which should I use?
For new projects, use the Composition API with <script setup>. It offers better TypeScript inference, more reusable logic via composables, and better performance. Options API is still supported and fine for simple components or teams migrating from Vue 2.
What is Vue Vapor mode?
Vue Vapor is an experimental compiler mode that eliminates the Virtual DOM, generating fine-grained DOM update instructions directly. It produces smaller bundles and faster runtime performance. It is not production-ready yet but shows promising benchmark results.