Comment gérer le scintillement du chargement des pages Vue

Cette fois, je vais vous montrer comment gérer le scintillement du chargement des pages Vue, et quelles sont les précautions pour gérer le clignotement du chargement des pages Vue. Ce qui suit est un cas pratique, prenons. un regard.

La différence entre v-if et v-show

v-if ne sera compilé que lorsque les conditions sont remplies, tandis que v-show Il sera toujours compilé, que les conditions soient remplies ou non. L'affichage et le masquage de v-show ne sont qu'un simple changement de l'attribut display de CSS.

En d'autres termes, lors de l'utilisation de v-if, si la valeur est fausse, alors la page n'aura pas cette balise html générée. Et v-show : que sa valeur soit fausse ou vraie, l'élément html existera, il suffit de changer simplement l'attribut display du CSS.

Scénarios d'utilisation

De manière générale, v-if a un coût de commutation plus élevé et v-show a un coût de rendu initial plus élevé. Par conséquent, v-show est préférable si vous devez changer fréquemment, et v-if est meilleur s'il est peu probable que les conditions changent au moment de l'exécution.

De plus

1. La directive v-if peut être appliquée aux éléments d'emballage des modèles, mais v-show ne prend pas en charge les modèles

2. Lors de l'application de v-show à un composant, il y aura un problème à cause de la priorité de l'instruction v-else La solution est de remplacer v-else par un autre v-show

 // 错误
  <custom-component v-show="condition"></custom-component>
  <p v-else>这可能也是一个组件</p>
     // 正确做法
  <custom-component v-show="condition"></custom-component>
  <p v-show="!condition">这可能也是一个组件</p>

Pour résoudre le problème du crash de {{message}} lors du chargement de la page vue

Méthode 1 : v-cloak

v-cloak Lorsqu'elle est utilisée avec une règle CSS telle que [v-cloak]{display:none}, cette directive masque les balises Moustache non compilées jusqu'à ce que l'instance soit prête.

La commande v-cloak peut lier un ensemble de styles CSS comme le
sélecteur CSS et ensuite cet ensemble de styles CSS prendra effet jusqu'à ce que l'instance soit compilée.

  eg:
    // <p> 不会显示，直到编译结束。
    [v-cloak]{
      display:none;
        }
    <p v-cloak>
       {{ message }}
    </p>

Méthode 2 : v-text

En vue, nous allons mettre les données entre deux accolades puis les mettre en HTML, mais en vue En interne, toutes les doubles parenthèses sont compilées dans une directive v-text de textNode.

L'avantage d'utiliser le v-text est toujours de meilleures performances, et plus important encore, cela permet d'éviter le FOUC (Flash of Uncompiled Content), qui est le problème rencontré ci-dessus.

eg:
  <span v-text="message"></span>
  <!-- same as -->
  <span>{{message}}</span>

Supplément :

Composant de barre de progression du chargement de la page Vue

Progression du chargement de la page J'ai vu l'article pour la première fois sur YouTube, et plus tard, il peut être vu sur presque tous les principaux sites Web. Il peut empêcher les utilisateurs de regarder une page complètement vide lors du chargement de la page, améliorant ainsi l'expérience utilisateur

Mais à partir d'un développement. D'un point de vue, il est vraiment difficile de saisir l'authenticité de ce type de barre de progression, car on ne peut pas compter la progression jusqu'à ce que le code logique soit chargé, et la progression du code logique lui-même ne peut pas être comptée. De plus, il nous est impossible de surveiller le chargement de toutes les ressources.

En fait, les utilisateurs ne se soucient pas du pourcentage de votre page qui est chargé, mais ce qui les intéresse vraiment, c'est le temps qu'il faut avant qu'elle soit complètement chargée, et si la page vierge n'a pas été complètement chargée ou est vide après son chargement. Nous n'avons donc pas besoin de "simuler" une barre de progression, d'utiliser un faux effet d'animation pour simuler le chargement avant le retour des données back-end, de lire la barre de progression et de la masquer après le retour des données.

// progress-bar.vue
<template>
 <transition name="fade">
  <p class="progress-bar" v-if="isShow">
  </p>
 </transition>
</template>
<script type="text/babel">
 export default {
  data() {
   return {
    isShow: true, // 是否显示进度条
    val: 0, // 进度
   }
  },
  props: {
   /**
    * 每10毫秒自增幅度
    */
   step: {
    type: Number,
    default: 5,
   },
   /**
    * 初始值
    */
   initVal: {
    type: Number,
    default: 0,
   },
   /**
    * 到一定进度停止
    */
   stopVal: {
    type: Number,
    default: 80,
   },
   /**
    * 进度条继续到成功
    */
   isOk: {
    type: Boolean,
    default: false,
   },
  },
  mounted() {
   // 初始化后加载进度，加载到百分之多少由stopVal决定
   this.val = this.initVal
   let step = this.step
   let timer = setInterval(() => {
    this.val = this.val + step
    this.$el.style.width = this.val + '%'
    // 父组件数据加载完前进度条最多到stopVal的这个百分值
    if (this.val >= this.stopVal) {
     clearInterval(timer)
     return
    }
   }, 10)
  },
  watch: {
   /**
    * 监听组件props变化决定是否继续加载，一般在父组件数据加载完后改变此标志位
    */
   isOk() {
    let val = this.val
    let step = this.step
    let timer = setInterval(() => {
     val = val + step
     this.$el.style.width = val + '%'
     // 加载到百分百完成
     if (val >= 100) {
      // 关闭定时器
      clearInterval(timer)
      // 加载完成关闭进度条
      this.isShow = false
      // 加载完成的回调
      this.$emit('callback', 'load success')
      return
     }
    }, 10)
   },
  },
 }
</script>
<style lang="stylus" rel="stylesheet/stylus">
 .progress-bar {
  position fixed
  top 0
  height 6px
  width 0
  background-color #999
 }
 .fade {
  &-enter-active, &-leave-active {
   transition: all .3s
  }
  &-enter, &-leave-active {
   opacity: 0
  }
 }
</style>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser les expressions EL en JS pour obtenir des paramètres de contexte

Comment utiliser JS pour effectuer un panoramique la liste de gauche Allez vers la droite

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!