Lösung für das Flackerproblem beim Laden von Vue-Seiten

In diesem Artikel wird hauptsächlich die Lösung für das Flash-Problem beim Laden der Vue-Seite vorgestellt. Der Artikel erwähnt den Unterschied zwischen v-if und v-show sowie zwei Methoden zur Behebung des {{message}}-Absturzes beim Laden der Vue-Seite . , interessierte Freunde, werfen wir einen Blick darauf

Der Unterschied zwischen v-if und v-show

v-if wird nur das treffen Bedingungen Es wird nur kompiliert, wenn die Bedingung erfüllt ist, während v-show immer kompiliert wird, unabhängig davon, ob die Bedingungen erfüllt sind. Das Anzeigen und Ausblenden von v-show ist nur ein einfacher Wechsel des Anzeigeattributs von CSS.

Mit anderen Worten: Wenn v-if verwendet wird und der Wert falsch ist, wird auf der Seite dieses HTML-Tag nicht generiert. Und v-show: Unabhängig davon, ob der Wert falsch oder wahr ist, ist das HTML-Element vorhanden. Wechseln Sie einfach das Anzeigeattribut des CSS.

Nutzungsszenarien

Im Allgemeinen hat v-if höhere Wechselkosten und v-show hat höhere anfängliche Renderingkosten. Daher ist v-show besser, wenn Sie häufig wechseln müssen, und v-if ist besser, wenn sich die Bedingungen zur Laufzeit wahrscheinlich nicht ändern.

Zusätzlich

1. Die v-if-Direktive kann auf Vorlagenumbruchelemente angewendet werden, v-show jedoch nicht Support-Vorlage

2. Beim Anwenden von v-show auf eine Komponente tritt aufgrund der Priorität der Anweisung v-else ein Problem auf. Die Lösung besteht darin, v-else durch ein anderes v-show zu ersetzen

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

Lösung für {{message}}-Absturz beim Laden der Vue-Seite

Methode 1: v-cloak

Wenn die v-cloak-Direktive mit CSS-Regeln wie [v-cloak]{display:none} verwendet wird, kann diese Direktive unkompilierte Mustache-Tags ausblenden, bis die Instanz verfügbar ist bereit.
Die V-Cloak-Direktive kann einen Satz CSS-Stile wie einen CSS-Selektor binden, und dieser Satz CSS wird wirksam, bis die Instanz kompiliert wird.

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

Methode 2: V-Text

In Vue werden wir die Daten in zwei geschweifte Klammern einschließen, und Fügen Sie es dann in HTML ein, aber innerhalb von Vue werden alle doppelten Klammern in eine V-Text-Direktive von textNode kompiliert.

Der Vorteil der Verwendung von V-Text ist immer eine bessere Leistung, und was noch wichtiger ist, es kann FOUC (Flash of Uncompiled Content) vermieden werden, das oben aufgetretene Problem.

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

Ergänzung:

Vue-Seitenlade-Fortschrittsbalkenkomponente

Ich habe den Fortschrittsbalken beim Laden der Seite zuerst auf YouTube gesehen und später ist er auf fast allen großen Websites zu sehen, sodass Benutzer beim Laden der Seite nicht mit einem völlig leeren Bereich konfrontiert werden benommen, um die Benutzererfahrung zu verbessern

Aber aus Entwicklungssicht ist es wirklich schwierig, die Authentizität dieser Art von Fortschrittsbalken zu erfassen, da wir den Fortschritt nicht zählen können, bevor der Logikcode geladen ist, und der Logikcode Es ist auch unmöglich, den eigenen Fortschritt zu zählen. Darüber hinaus ist es uns unmöglich, die Auslastung aller Ressourcen zu überwachen.

Tatsächlich ist es den Benutzern egal, wie viel Prozent Ihrer Seite geladen ist, aber was sie wirklich interessiert, ist, wie lange es dauert, bis sie vollständig geladen ist, und ob die leere Seite noch nicht vollständig geladen ist oder nicht ist nach dem Laden leer. Wir müssen also keinen Fortschrittsbalken „simulieren“, sondern einen gefälschten Animationseffekt verwenden, um das Laden zu simulieren, bevor die Back-End-Daten zurückgegeben werden, und den Fortschrittsbalken lesen und nach der Rückgabe der Daten ausblenden.

// 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>

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

AJAX-Verarbeitungsmethode für vom Server zurückgegebenes XML

AJAX einfache asynchrone Kommunikationsbeispielanalyse

JavaScript basiert auf Ajax, um Dateiinhalte dynamisch auf der Webseite anzuzeigen, ohne sie zu aktualisieren

Das obige ist der detaillierte Inhalt vonLösung für das Flackerproblem beim Laden von Vue-Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!