Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Для чого використовується v-once?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`v-once`** - це директива Vue, яка змушує елемент чи компонент **відрендеритися лише один раз**, а потім *більше ніколи не оновлюватися*, навіть якщо дані зміняться. **Ключове:** `v-once` робить частину шаблону статичною - Vue рендерить її один раз і перестає стежити за її оновленнями.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`v-once` - це директива Vue, яка змушує елемент чи компонент **відрендеритися лише один раз**, а потім *більше ніколи не оновлюватися*, навіть якщо дані зміняться. Простіше кажучи: > `v-once` **робить частину шаблону статичною. Vue рендерить її один раз і перестає стежити за її оновленнями.** --- ## Простий приклад ```html <p v-once>{{ message }}</p> ``` ```js data() { return { message: "Hello" } } ``` Якщо пізніше `message` зміниться - текст не оновиться. Vue просто ігнорує зміни і залишає старе значення. --- ## Як це працює під капотом - Vue рендерить елемент під час **першого** проходу. - Позначає його як **static**. - Надалі **не включає його в реактивну систему**. - Під час оновлення віртуального DOM цей вузол **пропускається**. --- ## Коли корисно використовувати `v-once`? ### 1. **Статичний контент** Якщо частина шаблону не залежить від даних: ```html <h1 v-once>Назва застосунку</h1> ``` ### 2. **Одноразові обчислення** Наприклад, важкі обчислення під час рендеру: ```html <div v-once>{{ expensiveCalculation() }}</div> ``` ### 3. **Оптимізація продуктивності** Vue не відстежуватиме цю частину шаблону -> менше роботи під час diff-процесів. ### 4. **Одноразовий рендер динамічного значення** Якщо потрібно вивести значення **лише під час першого рендеру**, а потім ігнорувати зміни: ```html <p v-once>Поточна дата: {{ new Date().toLocaleTimeString() }}</p> ``` --- ## Можна використовувати на компоненті ```html <UserCard v-once :user="user" /> ``` Навіть якщо `user` оновиться - компонент не перерендериться. --- ## Використання з `template` для групи елементів ```html <template v-once> <h2>{{ title }}</h2> <p>{{ description }}</p> </template> ``` Обидва вузли стануть статичними. --- ## Обмеження і важливі моменти - Не можна оновити елемент після `v-once` - це **односторонній шлях**. - Використовувати потрібно лише там, де ви **впевнені**, що значення ніколи не повинне змінюватися. - Це не замінює кешувальні computed чи memoization.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.