Solution au problème de scintillement du chargement de la page vue

Cet article présente principalement la solution au problème de clignotement du chargement de la page Vue. L'article mentionne la différence entre v-if et v-show, et deux méthodes pour résoudre le crash du {{message}} lors du chargement de la page Vue. . , amis intéressés, jetons un coup d'oeil

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

v-if ne répondra qu'au conditions Il ne sera compilé que lorsque la condition est remplie, tandis que v-show 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 d'affichage du CSS.

En d'autres termes, lors de l'utilisation de v-if, si la valeur est fausse, alors la page ne générera pas cette balise html. Et v-show : que sa valeur soit fausse ou vraie, l'élément html existera, changez 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 du modèle, mais pas v-show modèle de support

2. Lors de l'application de v-show à un composant, il y aura un problème en raison 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>

Solution au crash de {{message}} lors du chargement de la page vue

Méthode 1 : v-cloak

Lorsque la directive v-cloak est utilisée avec des règles CSS telles que [v-cloak]{display:none}, cette directive peut masquer les balises Moustache non compilées jusqu'à ce que l'instance est prête.

La directive v-cloak peut lier un ensemble de styles CSS comme un sélecteur CSS, et 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 regrouper les données entre deux grandes parenthèses , puis placés en HTML, mais à l'intérieur de vue, tous les doubles crochets seront compilés 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 de chargement de la page vue

J'ai vu pour la première fois la barre de progression du chargement de la page sur YouTube, et plus tard, elle peut être vue sur presque tous les principaux sites Web, afin que les utilisateurs n'y soient pas confrontés lors du chargement de la page. daze améliore l'expérience utilisateur

Cependant, du point de vue du développement, 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 de le code logique lui-même ne peut pas être mesuré. 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 + &#39;%&#39;
    // 父组件数据加载完前进度条最多到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 + &#39;%&#39;
     // 加载到百分百完成
     if (val >= 100) {
      // 关闭定时器
      clearInterval(timer)
      // 加载完成关闭进度条
      this.isShow = false
      // 加载完成的回调
      this.$emit(&#39;callback&#39;, &#39;load success&#39;)
      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>

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Méthode de traitement AJAX pour XML renvoyé par le serveur

Analyse d'un exemple de communication asynchrone simple AJAX

JavaScript est basé sur Ajax pour afficher dynamiquement le contenu des fichiers sur la page Web sans rafraîchir

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!