v-once/v-memo
v-once renders an element a single time and v-memo skips re-rendering a subtree until chosen values change.
In this page:
Syntax
<p v-once>{{ rendered_once }}</p>
<div v-memo="[dependency]">{{ content }}</div>v-once/v-memo
v-once tells Vue to render an element and its children once and treat them as static afterwards. v-memo takes an array of dependencies and re-renders only when one changes, which helps with huge lists.
Both are optimizations to use sparingly after measuring.
Note:
v-memo with an empty array behaves like v-once.
Example: v-once/v-memo
<!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">
<button @click="n++">n = {{ n }}</button>
<p v-once>Rendered once: {{ n }}</p>
<p>Live: {{ n }}</p>
<p v-memo="[n > 1]">Memo (changes only when n > 1 flips): {{ n }}</p>
</div>
<script>
Vue.createApp({ data() { return { n: 1 }; } }).mount("#app");
document.querySelector("button").click();
Vue.nextTick(() => console.log([...document.querySelectorAll("p")].map((p) => p.textContent).join(" | ")));
</script>
</body>
</html>
<!-- Output:
Rendered: n = 2Rendered once: 1Live: 2Memo (changes only when n > 1 flips): 2
console: Rendered once: 1 | Live: 2 | Memo (changes only when n > 1 flips): 2
-->Live Example
Related Topics
Common Mistakes
- Using v-once on content that must update
- Overusing v-memo everywhere
- Wrong dependency arrays freezing the UI
Chapter Summary
- v-once renders once
- v-memo re-renders on dependency change
- Useful for big lists
- Measure before using
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: