1---
2title: Use v-once and v-memo to Skip Unnecessary Updates
3impact: MEDIUM
4impactDescription: v-once skips all future updates for static content; v-memo conditionally memoizes subtrees
5type: efficiency
6tags: [vue3, performance, v-once, v-memo, optimization, directives]
7---
8 
9# Use v-once and v-memo to Skip Unnecessary Updates
10 
11**Impact: MEDIUM** - Vue re-evaluates templates on every reactive change. For content that never changes or changes infrequently, `v-once` and `v-memo` tell Vue to skip updates, reducing render work.
12 
13Use `v-once` for truly static content and `v-memo` for conditionally-static content in lists.
14 
15## Task List
16 
17- Apply `v-once` to elements that use runtime data but never need updating
18- Apply `v-memo` to list items that should only update on specific condition changes
19- Verify memoized content doesn't need to respond to other state changes
20- Profile with Vue DevTools to confirm update skipping
21 
22## v-once: Render Once, Never Update
23 
24**BAD:**
25```vue
26<template>
27  <!-- BAD: Re-evaluated on every parent re-render -->
28  <div class="terms-content">
29    <h1>Terms of Service</h1>
30    <p>Version: {{ termsVersion }}</p>
31    <div v-html="termsContent"></div>
32  </div>
33 
34  <!-- This content NEVER changes, but Vue checks it every render -->
35  <footer>
36    <p>Copyright {{ copyrightYear }} {{ companyName }}</p>
37  </footer>
38</template>
39```
40 
41**GOOD:**
42```vue
43<template>
44  <!-- GOOD: Rendered once, skipped on all future updates -->
45  <div class="terms-content" v-once>
46    <h1>Terms of Service</h1>
47    <p>Version: {{ termsVersion }}</p>
48    <div v-html="termsContent"></div>
49  </div>
50 
51  <!-- v-once tells Vue this never needs to update -->
52  <footer v-once>
53    <p>Copyright {{ copyrightYear }} {{ companyName }}</p>
54  </footer>
55</template>
56 
57<script setup>
58// These values are set once at component creation
59const termsVersion = '2.1'
60const termsContent = fetchedTermsHTML
61const copyrightYear = 2024
62const companyName = 'Acme Corp'
63</script>
64```
65 
66## v-memo: Conditional Memoization for Lists
67 
68**BAD:**
69```vue
70<template>
71  <!-- BAD: All items re-render when selectedId changes -->
72  <div v-for="item in list" :key="item.id">
73    <div :class="{ selected: item.id === selectedId }">
74      <ExpensiveComponent :data="item" />
75    </div>
76  </div>
77</template>
78```
79 
80**GOOD:**
81```vue
82<template>
83  <!-- GOOD: Items only re-render when their selection state changes -->
84  <div
85    v-for="item in list"
86    :key="item.id"
87    v-memo="[item.id === selectedId]"
88  >
89    <div :class="{ selected: item.id === selectedId }">
90      <ExpensiveComponent :data="item" />
91    </div>
92  </div>
93</template>
94 
95<script setup>
96import { ref } from 'vue'
97 
98const list = ref([/* many items */])
99const selectedId = ref(null)
100 
101// When selectedId changes:
102// - Only the previously-selected item re-renders (selected: true -> false)
103// - Only the newly-selected item re-renders (selected: false -> true)
104// - All other items are SKIPPED (v-memo values unchanged)
105</script>
106```
107 
108## v-memo with Multiple Dependencies
109 
110```vue
111<template>
112  <!-- Re-render only when item's selection OR editing state changes -->
113  <div
114    v-for="item in items"
115    :key="item.id"
116    v-memo="[item.id === selectedId, item.id === editingId]"
117  >
118    <ItemCard
119      :item="item"
120      :selected="item.id === selectedId"
121      :editing="item.id === editingId"
122    />
123  </div>
124</template>
125 
126<script setup>
127const selectedId = ref(null)
128const editingId = ref(null)
129const items = ref([/* ... */])
130</script>
131```
132 
133## v-memo with Empty Array = v-once
134 
135```vue
136<template>
137  <!-- v-memo="[]" is equivalent to v-once -->
138  <div v-for="item in staticList" :key="item.id" v-memo="[]">
139    {{ item.name }}
140  </div>
141</template>
142```
143 
144## When NOT to Use These Directives
145 
146```vue
147<template>
148  <!-- DON'T: Content that DOES need to update -->
149  <div v-once>
150    <span>Count: {{ count }}</span>  <!-- count won't update! -->
151  </div>
152 
153  <!-- DON'T: When child components have their own reactive state -->
154  <div v-memo="[selected]">
155    <InputField v-model="item.name" />  <!-- v-model won't work properly -->
156  </div>
157 
158  <!-- DON'T: When the memoization benefit is minimal -->
159  <span v-once>{{ simpleText }}</span>  <!-- Overhead not worth it -->
160</template>
161```
162 
163## Performance Comparison
164 
165| Scenario | Without Directive | With v-once/v-memo |
166|----------|-------------------|-------------------|
167| Static header, parent re-renders 100x | Re-evaluated 100x | Evaluated 1x |
168| 1000 items, selection changes | 1000 items re-render | 2 items re-render |
169| Complex child component | Full re-render | Skipped if memoized |
170 
171## Debugging Memoized Components
172 
173```vue
174<script setup>
175import { onUpdated } from 'vue'
176 
177// This won't fire if v-memo prevents update
178onUpdated(() => {
179  console.log('Component updated')
180})
181</script>
182```
183