Directiva v-cloak de Vue3

Vue3 内置指令Directivas integradas de Vue3

v-cloakLa directiva se usa para ocultar la plantilla no compilada hasta que la instancia del componente esté lista.

Descripción básica

v-cloakLa directiva se utiliza para resolver el problema del “parpadeo de plantilla no compilada” al usar plantillas DOM. Cuando el usuario accede a la página, es posible que vea las{{ }}etiquetas mustache originales, hasta que el componente Vue se monta y renderiza el contenido.

v-cloakSe mantendrá en el elemento hasta que la instancia del componente asociado se haya montado. Junto con reglas CSS, se puede ocultar la plantilla original durante este período.

  • Tipo esperado: Ninguno (no acepta expresiones)
  • Función: Oculta la plantilla no compilada hasta que el componente esté listo.

Nota: Esta directiva solo se necesita en configuraciones sin paso de compilación.

Uso básico

En el usov-cloakde v-cloak, es necesario combinarlo con reglas CSS:

Ejemplo

/* Regla CSS: ocultar elementos con v-cloak */
[v-cloak] {
  display: none;
}

Ejemplo

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

Cuando se completa la compilación,v-cloakel atributo se elimina automáticamente del elemento, y el elemento se muestra.

Escenarios de uso

v-cloakSe utiliza principalmente en los siguientes escenarios:

1. Introducción de Vue mediante CDN

Cuando se introduce Vue mediante CDN sin un paso de compilación, durante el breve lapso entre la carga de la página y el script de Vue, la plantilla podría no haberse compilado todavía:

Ejemplo

<!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. Estructura de plantilla compleja

Para plantillas complejas con múltiples enlaces de datos, v-cloak evita que el usuario vea contenido no renderizado:

Ejemplo

<div v-cloak>
  <h1>{{ title }}</h1>
  <p>Bienvenido, {{ username }}</p>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</div>

Principio de funcionamiento de v-cloak

  1. Cuando la página se carga, Vue aún no se ha inicializado, elv-cloakatributo v-cloak está presente en el elemento
  2. Las reglas CSS[v-cloak] { display: none; }ocultan estos elementos
  3. Vue se inicializa y compila la plantilla, creando datos reactivos
  4. Después de que el componente se monta, Vue elimina automáticamente elv-cloakatributo
  5. El elemento se muestra, presentando el contenido renderizado

Notas

Solo para escenarios sin paso de compilación: Al usar herramientas de compilación (como Vite, Webpack), la plantilla ya está compilada en la fase de construcción, por lo que no se necesita usar v-cloak.

Ejemplo

/* Asegúrate de que la regla v-cloak se cargue antes que todos los estilos */
/* Se recomienda colocar el CSS en el head */

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

Es necesario usarlo junto con CSS: v-cloak por sí mismo no oculta contenido, debe combinarse con reglas CSS para que surta efecto.

Diferencia con las herramientas de compilación modernas

Al usar herramientas de compilación modernas (como Vite), no es necesario usar v-cloak, porque:

  • La plantilla se compila previamente en la etapa de construcción
  • El JavaScript, una vez empaquetado, se carga de manera inline o asíncrona
  • El HTML inicial no contiene sintaxis de plantilla sin compilar

Por lo tanto, v-cloak se usa principalmente en la forma tradicional de introducción mediante CDN o en escenarios de páginas HTML simples.

Vue3 内置指令Directivas integradas de Vue3

Otras extensiones