Для чого використовується v-once?

VueJunior~1 хв читання

v-once - це директива Vue, яка змушує елемент чи компонент відрендеритися лише один раз, а потім більше ніколи не оновлюватися, навіть якщо дані зміняться.

Простіше кажучи:

v-once робить частину шаблону статичною. Vue рендерить її один раз і перестає стежити за її оновленнями.

Простий приклад

html

<p v-once>{{ message }}</p>

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.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.