Comment utiliser v-cloak pour résoudre les problèmes de flash dans Vue

Vue est un framework progressif pour créer des interfaces utilisateur, et de plus en plus de développeurs commencent à l'utiliser pour développer des interfaces frontales dans des projets. Lors du processus d'utilisation de Vue, nous serons parfois confrontés à des problèmes de flashage de style. Cet article explique comment utiliser v-cloak dans Vue pour résoudre ce problème.

Quel est le problème de style clignotant ?

Lorsque Vue restitue un composant, lorsque la liaison de données Vue est utilisée dans le modèle, les données sont d'abord analysées, puis les différences causées par les modifications des données sont mises à jour dans le DOM. Ce processus prend un certain temps, surtout si les données sont complexes ou s'il existe de nombreux nœuds DOM, cela entraînera un bref changement de style lors du rendu du composant lors du chargement de la page. Cette situation est appelée une question de style.

Les deux implémentations suivantes sont introduites respectivement :

1. Utilisez l'attribut display de CSS

Dans le composant Vue, vous pouvez définir l'attribut display sur none via l'attribut style, puis le modifier pour bloquer dans le monté( ) cycle de vie. Une fois le composant Vue rendu, tous les CSS seront chargés, ce qui entraînera le masquage du DOM du composant jusqu'à son premier chargement.

<template>
  <div class="container" v-cloak>隐藏结果</div>
</template>
<style>
  [v-cloak] {
    display: none;
}
</style>

<script>
export default {
  mounted () {
    this.$nextTick(() => {
      this.show = true
    })
  }
}
</script>

Cette méthode est relativement simple et adaptée aux pages simples. Mais si la page est complexe ou nécessite de charger des données asynchrones, cette méthode peut ne pas convenir. Ensuite, vous pouvez envisager d'utiliser v-cloak pour l'implémenter.

2. Utiliser v-cloak

v-cloak est l'une des directives fournies par Vue, qui peut être utilisée pour masquer la syntaxe Moustache non compilée. L'élément v-cloak et ses enfants resteront display:none jusqu'à ce que la syntaxe Moustache soit analysée en une valeur réelle. Une fois le compilateur Vue prêt, l'élément v-cloak sera supprimé.

<template>
  <div class="container" v-cloak>显示结果</div>
</template>
<style>
  [v-cloak] {
    display: none;
}
</style>

<script>
export default {
  mounted () {
    this.$nextTick(() => {
      this.show = true
    })
  }
}
</script>

Utilisez la directive [v-cloak] sur le composant pour contrôler le masquage, définissez le style via