Directive v-cloak de Vue 3

Vue3 内置指令Vue3 Directives intégrées

v-cloakLa directive est utilisée pour masquer les modèles non compilés jusqu'à ce que l'instance du composant soit prête.

Explication de base

v-cloakLa directive est utilisée pour résoudre le problème du « flash de modèle non compilé » lors de l'utilisation de modèles DOM. Lorsque les utilisateurs visitent la page, ils peuvent voir les{{ }}balises moustache brutes jusqu'à ce que le composant Vue soit monté et affiche le contenu.

v-cloakElle reste sur l'élément jusqu'à ce que l'instance de composant associée soit montée. Combinée aux règles CSS, elle peut masquer le modèle brut pendant cette période.

  • Type attendu: Aucun (n'accepte pas d'expressions)
  • Objectif: Masque les modèles non compilés jusqu'à ce que le composant soit prêt.

Remarque: Cette directive n'est nécessaire que dans les configurations sans étape de build.

Utilisation de base

Lors de l'utilisationv-cloak, vous devez la combiner avec des règles CSS :

Exemple

/* Règle CSS : masquer les éléments avec v-cloak */
[v-cloak] {
  display: none;
}

Exemple

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

Lorsque la compilation est terminée,v-cloakl'attribut est automatiquement retiré de l'élément, et l'élément est affiché.

Cas d'utilisation

v-cloakPrincipalement utilisé dans les scénarios suivants :

1. Importer Vue via un CDN

Lors de l'importation de Vue via un CDN sans étape de build, pendant la brève période entre le chargement de la page et le script Vue, le template peut ne pas encore être compilé :

Exemple

<!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. Structures de template complexes

Pour les templates complexes avec plusieurs liaisons de données, v-cloak empêche les utilisateurs de voir du contenu non rendu :

Exemple

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

Comment fonctionne v-cloak

  1. Lorsque la page se charge, Vue n'a pas encore été initialisé, etv-cloakl'attribut existe sur l'élément.
  2. règles CSS[v-cloak] { display: none; }masquent ces éléments.
  3. Vue s'initialise et compile le template, créant des données réactives.
  4. Une fois le composant monté, Vue supprime automatiquement l'attributv-cloakattribut.
  5. Les éléments deviennent visibles, affichant le contenu rendu.

Notes

Uniquement pour les scénarios sans étape de build: Lors de l'utilisation d'outils de build (comme Vite, Webpack), le template est déjà compilé pendant la phase de build, donc v-cloak n'est pas nécessaire.

Exemple

/* Assurez-vous que la règle v-cloak se charge avant tous les styles */
/* Il est recommandé de placer le CSS dans le head */

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

Doit être utilisé avec CSS: v-cloak lui-même ne masque pas le contenu ; il doit être combiné avec des règles CSS pour prendre effet.

Différences avec les outils de build modernes

Lors de l'utilisation d'outils de build modernes (comme Vite), il n'est pas nécessaire d'utiliser v-cloak car :

  • Le template est précompilé pendant la phase de build
  • Le JavaScript est inliné ou chargé de manière asynchrone après le bundling
  • Le HTML initial ne contient pas de syntaxe de template non compilée

Par conséquent, v-cloak est principalement utilisé dans les méthodes d'import traditionnelles via CDN ou dans des scénarios de pages HTML simples.

Vue3 内置指令Vue3 Directives intégrées

Autres extensions