Директива v-cloak в Vue3

Vue3 内置指令Встроенные директивы Vue3

v-cloakДиректива используется, чтобы скрывать некомпилированные шаблоны до готовности экземпляра компонента.

Базовое объяснение

v-cloakДиректива используется для решения проблемы «вспышки некомпилированного шаблона» при использовании DOM-шаблонов. Когда пользователи заходят на страницу, они могут увидеть необработанные{{ }}mustache-теги, пока компонент Vue не смонтируется и не отрисует содержимое.

v-cloakОна остаётся на элементе, пока связанный экземпляр компонента не смонтирован. В сочетании с правилами CSS она может скрывать необработанный шаблон в течение этого периода.

  • Ожидаемый тип: отсутствует (не принимает выражения)
  • Назначение: скрывает некомпилированные шаблоны до готовности компонента.

Примечание: эта директива нужна только в конфигурациях без этапа сборки.

Базовое использование

При использованииv-cloak, нужно сочетать её с CSS-правилами:

Пример

/* CSS-правило: скрыть элементы с v-cloak */
[v-cloak] {
  display: none;
}

Пример

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

Когда компиляция завершена,v-cloakатрибут автоматически удаляется из элемента, и элемент отображается.

Сценарии использования

v-cloakВ основном используется в следующих сценариях:

1. Импорт Vue с помощью CDN

При импорте Vue через CDN без этапа сборки в течение короткого периода между загрузкой страницы и скриптом Vue шаблон может быть ещё не скомпилирован:

Пример

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-cloak>
      {{ message }}
    </div>
  </div>

  <script>
    const { createApp } = Vue

    createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

2. Сложные структуры шаблонов

Для сложных шаблонов с множеством привязок данных v-cloak не позволяет пользователям видеть неотрендеренное содержимое:

Пример

<div v-cloak>
  <h1>{{ title }}</h1>
  <p>Добро пожаловать, {{ username }}</p>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</div>

Как работает v-cloak

  1. Когда страница загружается, Vue ещё не инициализирован, иv-cloakатрибут присутствует на элементе.
  2. Правила CSS[v-cloak] { display: none; }скрывают эти элементы.
  3. Vue инициализируется и компилирует шаблон, создавая реактивные данные.
  4. После монтирования компонента Vue автоматически удаляетv-cloakатрибута.
  5. Элементы становятся видимыми, отображая отрендеренное содержимое.

Примечания

Только для сценариев без этапа сборки: При использовании инструментов сборки (таких как Vite, Webpack) шаблон уже скомпилирован на этапе сборки, поэтому v-cloak не нужен.

Пример

/* Убедитесь, что правило v-cloak загружается до всех стилей */
/* Рекомендуется размещать CSS в head */

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

Нужно использовать вместе с CSS: сам v-cloak не скрывает содержимое; его необходимо сочетать с правилами CSS, чтобы он возымел эффект.

Отличия от современных инструментов сборки

При использовании современных инструментов сборки (таких как Vite) v-cloak не нужен, потому что:

  • Шаблон предварительно компилируется на этапе сборки
  • JavaScript встраивается в документ или загружается асинхронно после сборки бандла
  • Исходный HTML не содержит нескомпилированного синтаксиса шаблона

Поэтому v-cloak в основном используется при традиционном подключении через CDN или в простых сценариях с HTML-страницами.

Vue3 内置指令Встроенные директивы Vue3

Другие расширения