Vue's reactivity system already skips most unnecessary work, which is why premature optimization in Vue apps usually optimizes nothing. Real slowness clusters in a few recognizable places, giant lists, over-reactive data, heavy components hydrating too early, and the craft is finding yours before reaching for the tricks.
Profile before touching anything
The Vue Devtools profiler shows which components render, how often, and why; the browser Performance tab shows whether time goes to scripting, rendering, or layout. Five minutes of measurement routinely contradicts intuition, and the component you suspected is rarely the one repainting four hundred times.
The fixes that usually matter
- Long lists: virtualize anything past a few hundred rows so only visible items render; stable
:keys everywhere, andv-memoon expensive rows that rarely change. - Over-reactivity: wrap large, replace-not-mutate data, chart series, map geometries, API dumps, in
shallowRef, and Vue stops proxying ten thousand nested objects it never needed to track. - Expensive computeds: a computed that filters thousands of items reruns on any tracked change; narrow its dependencies or precompute upstream.
- Conditional weight:
v-ifactually removes heavy subtrees;v-showkeeps them alive and rendering.
Ship less, hydrate later
Bundle size is startup performance: lazy-load routes, defer heavy widgets with defineAsyncComponent, and audit what each marketing tag added. In Nuxt, lazy hydration, hydrate a component on visibility or idle rather than immediately, is now built in, and below-the-fold interactive widgets are exactly what it is for.
Set a simple budget, interaction under 100 milliseconds, list scroll at 60fps, and stop when you hit it. Performance work past the point users can feel is hobby time wearing a work badge.