Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке мемоізація в контексті Vue?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Мемоізація у Vue** - це техніка оптимізації, за якої результат обчислень кешується, і при повторному рендері Vue використовує закешоване значення, якщо вхідні дані не змінилися. **Ключове:** у Vue це стосується `computed`, `v-memo`, оптимізацій компілятора (patch flags і block tree) та функцій у Composition API.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Мемоізація в контексті Vue** - це техніка оптимізації, за якої **результат обчислень кешується**, і при повторному рендері Vue **використовує закешоване значення**, якщо вхідні дані не змінилися. Простіше кажучи: > **Мемоізація дозволяє Vue не перераховувати і не перерендерювати фрагменти, якщо їхні залежності залишилися незмінними.** У Vue це стосується: - `computed` - `v-memo` - оптимізацій компілятора (patch flags & block tree) - функцій у Composition API --- ## 1. Мемоізація в `computed()` `computed` - це **кешована обчислювана функція**. Приклад: ```js const fullName = computed(() => { console.log('computed called') return user.first + ' ' + user.last }) ``` Навіть при множинних рендерах: - обчислення відбудеться тільки **один раз** - повторно перерахується тільки **коли зміняться залежності** Це основний приклад мемоізації. --- ## 2. Мемоізація шаблонів через `v-memo` (Vue 3) Vue 3 надає директиву `v-memo`, яка дозволяє кешувати фрагменти шаблону: ```vue <div v-memo="[id]"> {{ expensiveCalculation }} </div> ``` Блок перерендериться **тільки якщо** `id` **змінився**. Якщо ні - Vue взагалі пропускає diff. --- ## 3. Мемоізація на рівні Virtual DOM (patch flags + block tree) Vue 3 компілює шаблон так, що: - статичні вузли виносяться в кеш (`hoisting`) - динамічні позначаються patch-флагами - блоки (`block tree`) включають тільки змінювані елементи Підсумок: > Vue "мемоїть" статичні елементи і не перевіряє їх при diff. По суті - мемоізація шаблону на рівні Virtual DOM. --- ## 4. Мемоізація за допомогою `shallowRef` / `markRaw` Коли є важкий об'єкт, який не повинен викликати рендер: ```js const chart = shallowRef(null) // або const engine = markRaw(new HeavyEngine()) ``` Vue **мемоізує** об'єкт - відстежує тільки верхній рівень, а не всю структуру. --- ## 5. Мемоізація функцій у Composition API Функції, що повертають реактивні дані (composables), теж можуть бути мемоізовані, наприклад, викликати їх один раз і повторно використовувати результат, а не створювати заново. --- ## Навіщо потрібна мемоізація у Vue? Щоб зменшити: - кількість обчислень - кількість перерендерів - навантаження на Virtual DOM - час роботи watchers - час patch-навігації І збільшити: - FPS - швидкість оновлення інтерфейсу - чуйність застосункуДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.