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 c9ccee2e6ea535a969eb3f532ad9fe89 et définissez l'élément à l'état masqué. De cette façon, avant le chargement de l'instance Vue, même si le composant contient de nombreuses opérations fastidieuses telles que des requêtes asynchrones et des propriétés calculées, nous pouvons garder le composant masqué et éviter les problèmes de flashage de style.

L'avantage d'utiliser v-cloak est qu'il supprimera automatiquement l'élément v-cloak une fois que le compilateur Vue est prêt, vous n'avez donc pas besoin de changer manuellement l'attribut d'affichage, ce qui simplifie le code et la maintenance.

Autres solutions

En plus des deux solutions ci-dessus, nous pouvons également utiliser le préfixe automatique du plug-in postcss dans vue-loader pour le prétraitement. Ce plugin peut ajouter automatiquement des préfixes de style CSS pour nous. Bien qu'il ne résolve pas tous les problèmes de scintillement, c'est une bonne solution. La mise en œuvre est la suivante :

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')]
            }
          }
        ]
      }
    ]
  }
}

Résumé

Il existe de nombreuses façons de résoudre le problème du style flash, et les deux méthodes ci-dessus peuvent obtenir les résultats escomptés. L'utilisation de v-cloak est l'un des meilleurs moyens de créer une apparence globale, mais sachez que dans de nombreux cas, JavaScript désactivera les animations pour les éléments display:none. Par conséquent, lorsque vous utilisez v-cloak, soyez prudent lorsque vous sélectionnez les éléments nécessitant des effets d'animation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!