Skip to main content

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

VueJunior~1 хв читання
Запропонувати правку

v-cloak - це допоміжна директива Vue, яка використовується для приховування шаблону до того моменту, поки застосунок Vue не буде ініціалізовано.

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

v-cloak допомагає уникнути мерехтіння необробленого шаблону ({{ }}) до завантаження Vue.

Навіщо це потрібно?

Коли застосунок завантажується, буває момент, коли HTML вже відобразився, але Vue ще не встиг скомпілювати шаблони.

Наприклад, користувач може побачити:

{{ message }}

замість вже обчисленого тексту.

Це виглядає неприємно (так званий template flicker).

v-cloak дозволяє приховати такі елементи до завершення ініціалізації Vue.

Як використовується

1. Додаєш директиву в HTML:

html
<div id="app" v-cloak> {{ message }} </div>

2. І стилі:

html
<style> [v-cloak] { display: none; } </style>

3. Коли Vue змонтується - атрибут автоматично видалиться

Vue сам видаляє v-cloak, і елемент знову відображається вже з коректними даними.

Приклад

До ініціалізації Vue:

<div v-cloak>{{ counter }}</div>

Користувач побачив би:

{{ counter }}

Але завдяки v-cloak - елемент прихований.

Після ініціалізації Vue:

  • v-cloak зникає
  • DOM показує коректне значення, наприклад: 42

Важливе

  • v-cloak не керує реактивністю і не впливає на роботу застосунку.
  • Це лише візуальний фільтр, що приховує необроблений шаблон.
  • Використовується найчастіше в SSR, SPA з повільним завантаженням, старих браузерах.

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

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

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

Запропонувати правку