Vue 3.5 Released: Improved Reactivity and useTemplateRef

The Vue team has released Vue 3.5 "Tengen Toppa Gurren Lagann", a minor but impactful release that brings several quality-of-life improvements.

useTemplateRef()

A new useTemplateRef() composable replaces the pattern of using a plain ref with a matching template ref name:

// Before Vue 3.5
const input = ref(null) // must match ref="input" in template

// Vue 3.5+
import { useTemplateRef } from 'vue'
const input = useTemplateRef('my-input') // explicitly tied to ref="my-input"

Reactivity Memory Improvements

The reactivity system was refactored to use significantly less memory — benchmarks show up to 56% reduction in memory usage for large reactive object trees. This particularly benefits applications with large data sets or many components.

SSR Hydration Mismatches

Vue 3.5 introduces "lazy hydration" strategies for async components, and provides clearer warnings when hydration mismatches occur in server-side rendered applications.

Deferred Teleport

<!-- defer ensures the target exists before teleporting -->
<Teleport to="#target" defer>
  <MyComponent />
</Teleport>