Suggest an editImprove this articleRefine the answer for “What does the v-memo directive do?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`v-memo`** is an optimization directive in Vue 3.3+ that tells the framework not to re-render a template fragment until a specific set of dependencies changes. **Key point:** if none of the listed dependencies have changed, Vue skips updating the virtual DOM and re-rendering that fragment, which speeds up applications with heavy lists or components.Shown above the full answer for quick recall.Answer (EN)Image`v-memo` is an **optimization directive in Vue 3.3+** that tells the framework: > **"Do not re-render this template fragment until a specific set of dependencies changes."** In other words, this is a *conditional skip of updates* (memoization), similar to `React.memo`. --- ## In simple terms `v-memo` lets you **cache part of the template**. If the dependencies have not changed, Vue skips: - updating the virtual DOM - comparing nodes (diffing) - re-rendering the component This can **significantly speed up** an application with heavy components, tables, lists, and so on. --- ## Syntax ```html <div v-memo="[id, name]"> <!-- content that Vue will not update until id and name change --> </div> ``` The array is the list of dependencies. --- ## Example ```html <div v-memo="[user.id]"> <h3>{{ user.name }}</h3> <p>{{ user.email }}</p> </div> ``` If `user.name` or `user.email` changes but `user.id` does not: - This fragment *will not update*. - Vue will skip it during diffing. In other words, you have a **frozen piece of the template** until `user.id` changes. --- ## Where this is useful ### 1. Large lists For example, a table with thousands of rows: ```html <tr v-for="row in rows" :key="row.id" v-memo="[row.id]"> <td>{{ row.value1 }}</td> <td>{{ row.value2 }}</td> <td>{{ computeHeavy(row) }}</td> </tr> ``` If the `row` object updates without `row.id` changing, Vue skips the row's re-render. --- ### 2. Heavy computations in the template ```html <div v-memo="[item.version]"> {{ heavyComputation(item.data) }} </div> ``` --- ### 3. Partially freezing the UI You can avoid unnecessary updates of widgets, banners, static blocks. --- ## Important points - `v-memo` only works **on updates**, the first render always runs. - If any dependency changes → the entire fragment updates fully. - This is a *manual* optimization, worth applying only when there is a problem. --- ## Do not confuse with: #### `v-once` - renders once, then *never* updates - rigidly static #### `v-memo` - updates *only when dependencies change* - more flexible and controllableFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.