Performance Optimization
Practical techniques for keeping a Vue app fast — lazy loading routes, v-memo, and avoiding unnecessary re-renders.
Lazy-Loading Routes
Instead of importing every route's component up front, use a dynamic import so each route's code downloads only when it's actually visited — shrinking the initial bundle significantly on larger apps.
const routes = [ { path: '/', component: () => import('../views/HomePage.vue') }, { path: '/settings', component: () => import('../views/SettingsPage.vue') },];v-memo
v-memo skips re-rendering part of the template as long as a list of dependency values hasn't changed — a targeted optimization for expensive render output in large lists.
<div v-for="item in list" :key="item.id" v-memo="[item.id, item.selected]"> <!-- Only re-renders if item.id or item.selected actually changed --> <ExpensiveItemDisplay :item="item" /></div>v-memo adds its own overhead to track dependencies — reserve it for genuinely expensive render output in large lists, verified with profiling, not as a blanket default on every element.
Virtualizing Long Lists
Rendering thousands of DOM nodes for a huge list is expensive regardless of framework. A virtual scrolling library (like vue-virtual-scroller) renders only the items currently visible in the viewport, recycling DOM nodes as the user scrolls.
Avoiding Unnecessary Reactivity
- Use shallowRef/shallowReactive for large data structures you only ever replace wholesale, not mutate deeply.
- Avoid deep watchers ({ deep: true }) on large objects unless genuinely necessary.
- Prefer computed properties over methods for anything displayed in a template, so results are cached.
- Use v-show instead of v-if for elements that toggle very frequently.
A Performance Checklist
- Lazy-load routes and heavy, rarely-used components.
- Always provide a stable, unique :key in v-for lists.
- Use computed() instead of method calls for derived template values.
- Virtualize genuinely long lists (hundreds+ of items).
- Clean up timers, intervals, and manual event listeners in onUnmounted.
FAQs
Yes — its compiler already skips re-evaluating static template content, and its Proxy-based reactivity tracks dependencies precisely, so most apps never need manual optimization at all.
The Vue.js devtools browser extension for component-level insight, and Lighthouse in Chrome DevTools for overall page performance metrics.
Summary
Vue's reactivity system already handles most performance concerns automatically — lazy loading, v-memo, and virtualization cover the remaining, larger-scale cases. Next, you'll look at Nuxt.js, Vue's server-side rendering framework.