Performance tips
Small habits, like using computed values, stable keys and lazy loading, keep Vue apps fast.
In this page:
Performance tips
Prefer computed over methods for derived data, use keys on lists, avoid deep reactivity on huge read-only data with shallowRef, split routes with dynamic imports, and virtualize very long lists.
Use v-once and v-memo for static or rarely changing parts and measure before optimizing.
Note:
shallowRef and markRaw avoid making large objects deeply reactive.
Example: Performance tips
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app"><p>{{ status }}</p></div>
<script>
Vue.createApp({
setup() {
const big = Vue.shallowRef({ items: Array.from({ length: 1000 }, (_, i) => i) });
const deep = Vue.ref({ items: [1, 2, 3] });
const status = `shallow keeps ${big.value.items.length} raw items; deepProxy=${Vue.isReactive(deep.value)}, shallowProxy=${Vue.isReactive(big.value)}`;
console.log(status);
return { status };
},
}).mount("#app");
</script>
</body>
</html>
<!-- Output:
Rendered: shallow keeps 1000 raw items; deepProxy=true, shallowProxy=false
console: shallow keeps 1000 raw items; deepProxy=true, shallowProxy=false
-->Live Example
Related Topics
Common Mistakes
- Deep reactivity on huge data
- Heavy work inside templates
- Optimizing before measuring
Chapter Summary
- Use computed for derived data
- Key lists and virtualize long ones
- shallowRef for big read-only data
- Lazy load routes
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: