YouTip

# Vue 3 v-memo Directive The `v-memo` directive is a performance optimization feature introduced in **Vue 3.2+**. It allows you to memoize a subtree of the template by specifying an array of dependency values. Vue will skip updating the memoized element and its children unless one of the specified dependencies has changed. --- ## Overview The `v-memo` directive caches a portion of the Virtual DOM template. It expects a fixed-length array of dependency values. During a re-render, if every value in the array is strictly equal (`===`) to its value from the previous render, the update for the entire subtree is skipped. * **Expected Type:** `any[]` * **Primary Purpose:** Optimize rendering performance by skipping unnecessary Virtual DOM updates for static or semi-static subtrees. --- ## Basic Syntax ```html ``` --- ## Common Use Cases ### 1. Long List Optimization (`v-for`) The most common and effective use case for `v-memo` is optimizing large lists. When rendering a list of hundreds or thousands of items, a change to a single item (such as selecting or expanding it) can trigger re-renders across the entire list. By using `v-memo` with `v-for`, you can ensure that only the items whose state actually changed will be re-rendered. ```html ``` *In this example, if you update `item.isSelected` on the first item, only that specific item's DOM subtree will be updated. The second item will completely skip the update process because its dependencies (`isSelected` and `isExpanded`) did not change.* --- ## Comparison: `v-memo` vs `v-once` While both directives are used for performance optimization, they serve different purposes: | Directive | Behavior | Best Use Case | | :--- | :--- | :--- | | **`v-once`** | Renders the element and component once and skips all future updates. | Completely static content that never changes after the initial render. | | **`v-memo`** | Skips updates **only** when the specified dependency array remains unchanged. | Dynamic content that changes only when specific reactive properties change. | --- ## Important Considerations 1. **Do not use `v-memo` inside `v-for` without a dependency array:** Using `v-memo` without specifying dependencies inside a `v-for` loop is not recommended, as Vue needs the dependencies to track changes correctly. 2. **Avoid over-optimization:** `v-memo` should not be used everywhere. It introduces a small overhead because Vue has to compare the dependency arrays on every render. Use it primarily on large lists or complex component subtrees where you have identified actual rendering performance bottlenecks.