Suggest an editImprove this articleRefine the answer for “What is memoization in the context of Vue?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Memoization in Vue** is an optimization technique where the result of a computation is cached, and on re-render Vue uses the cached value if the input data has not changed. **Key point:** in Vue this applies to `computed`, `v-memo`, compiler optimizations (patch flags and block tree), and functions in the Composition API.Shown above the full answer for quick recall.Answer (EN)Image**Memoization in the context of Vue** is an optimization technique where **the result of a computation is cached**, and on re-render Vue **uses the cached value** if the input data has not changed. Put simply: > **Memoization lets Vue avoid recalculating and re-rendering fragments if their dependencies stayed the same.** In Vue this applies to: - `computed` - `v-memo` - compiler optimizations (patch flags & block tree) - functions in the Composition API --- ## 1. Memoization in `computed()` `computed` is a **cached computed function**. Example: ```js const fullName = computed(() => { console.log('computed called') return user.first + ' ' + user.last }) ``` Even across multiple renders: - the calculation happens only **once** - it is recalculated only **when the dependencies change** This is the primary example of memoization. --- ## 2. Template memoization via `v-memo` (Vue 3) Vue 3 provides the `v-memo` directive, which lets you cache template fragments: ```vue <div v-memo="[id]"> {{ expensiveCalculation }} </div> ``` The block re-renders **only if** `id` **has changed**. If not, Vue skips the diff entirely. --- ## 3. Memoization at the Virtual DOM level (patch flags + block tree) Vue 3 compiles the template so that: - static nodes are hoisted into a cache (`hoisting`) - dynamic nodes are marked with patch flags - blocks (`block tree`) only include elements that can change The result: > Vue "memoizes" static elements and does not check them during diffing. Essentially, this is template memoization at the Virtual DOM level. --- ## 4. Memoization with `shallowRef` / `markRaw` When there is a heavy object that should not trigger a re-render: ```js const chart = shallowRef(null) // or const engine = markRaw(new HeavyEngine()) ``` Vue **memoizes** the object, tracking only the top level, not the whole structure. --- ## 5. Memoization of functions in the Composition API Functions that return reactive data (composables) can also be memoized, for example calling them once and reusing the result instead of recreating it. --- ## Why is memoization needed in Vue? To reduce: - the number of calculations - the number of re-renders - the load on the Virtual DOM - watcher execution time - patch navigation time And to increase: - FPS - UI update speed - application responsivenessFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.