Vue Skilld

Also changed: defineSlots<{}>() macro NEW v3.3 for typed slot declarations · defineOptions({}) macro NEW v3.3 to set component options without a separate <script> block · toRef(() => getter) enhanced in v3.3 to accept plain values and getters · toValue() NEW v3.3 normalizes values/getters/refs to values (inverse of toRef) · v-bind same-name shorthand NEW v3.4 (:id shorthand for :id="id") · data-allow-mismatch attribute NEW v3.5 to suppress hydration mismatch warnings · useHost() / useShadowRoot() NEW v3.5 for custom element host access · v-is directive REMOVED v3.4 (use is="vue:ComponentName" instead) · reactivity system alien-signals refactor in v3.6 improves memory usage with no API changes

Best Practices

• Use reactive props destructure (3.5+) with native default value syntax instead of withDefaults() — destructured variables are reactive and the compiler rewrites accesses to props.x automatically. When passing to composables or watch, wrap in a getter: watch(() => count, ...) source

• Use toValue() in composables to normalize MaybeRefOrGetter<T> arguments — handles plain values, refs, and getter functions uniformly so callers can pass any form without the composable caring source

• Use onWatcherCleanup() (3.5+) instead of the onCleanup callback parameter in watch and watchEffect — it can be called from any helper function in the sync execution stack, not just the top-level callback, making cleanup logic easier to extract source

• Use useTemplateRef() (3.5+) instead of a plain ref with a matching variable name for template refs — supports dynamic ref IDs and provides better IDE auto-completion and type checking via @vue/language-tools 2.1 source

• Use useId() (3.5+) for form element and accessibility IDs in SSR apps — generated IDs are stable across server and client renders, preventing hydration mismatches. Avoid calling inside computed() as it can cause instance conflicts source

• Use shallowRef() / shallowReactive() for large immutable data structures — deep reactivity tracks every property access via proxy traps; shallow variants avoid this overhead while still reacting to root .value replacement source

• Pass computed values directly as active props rather than IDs for comparison — child components re-render when any received prop changes, so passing a stable boolean avoids re-rendering every list item when only one item's active state changes source

• When a computed returns a new object on every evaluation, accept oldValue and return it unchanged when data is equivalent — avoids unnecessary downstream effect triggers since Vue 3.4+ only triggers effects when the computed value reference changes source

• Use defineAsyncComponent with a lazy hydration strategy (3.5+) for SSR — hydrateOnVisible(), hydrateOnIdle(), hydrateOnInteraction(), and hydrateOnMediaQuery() are tree-shakable and defer hydration until the component is actually needed

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnVisible()
})

source

• (experimental) Opt in to Vapor Mode per-component with <script setup vapor> when targeting performance-sensitive UI — Vapor avoids Virtual DOM diffing entirely and achieves Solid/Svelte 5 benchmark parity, but does not support Options API, app.config.globalProperties, or getCurrentInstance(). Use vaporInteropPlugin to mix Vapor and VDOM components in an existing app source