How do you optimise the performance of a Vue application?

Summary

Measure first (Vue Devtools performance timeline, browser profiler, Lighthouse), then: reduce bundle size (lazy routes, tree-shaking, analysing dependencies), avoid unnecessary re-renders (stable props, computed values, v-once / v-memo for static or rarely changing subtrees), virtualise long lists, use shallowRef for large immutable data, and server-render or pre-render pages that need fast first paint.

Longer Answer

Common culprits: rendering thousands of rows (use a virtual scroller), passing new object or array literals as props on every render (child re-renders), deep watchers on large objects, making huge third-party objects deeply reactive (wrap with markRaw or shallowRef), and heavy work in computed properties that depend on frequently changing state.

Vue's compiler already optimises templates (static hoisting, patch flags), so focus on data size, reactivity scope and component granularity rather than micro-memoisation.

Key Points

• Measure first.
• Lazy loading and bundle analysis.
• Virtual lists; shallowRef/markRaw for big data.
• v-once / v-memo; stable props.