So verhindern Sie, dass das Laden der Vue-Seite flackert

Dieses Mal erkläre ich Ihnen, wie Sie das Flackern des Ladens von Vue-Seiten verhindern können und welche Vorsichtsmaßnahmen Sie treffen können, um das Flackern des Ladens von Vue-Seiten zu verhindern. Schauen wir uns hier einen praktischen Fall an.

Der Unterschied zwischen v-if und v-show

v-if wird nur kompiliert, wenn die Bedingungen erfüllt sind, während v-show Es wird immer kompiliert, 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 von 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 Vorlagenverpackungselemente angewendet werden, v-show unterstützt jedoch keine Vorlagen

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

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

v-cloak-Befehl und Bei Verwendung zusammen mit CSS-Regeln wie [v-cloak]{display:none} kann diese Direktive unkompilierte Mustache-Tags ausblenden, bis die Instanz bereit ist.

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 sie dann in HTML einfügen, aber innerhalb von Vue sind es nur doppelte Klammern wird 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

Seitenlade-Fortschrittsbalken anfänglich Ich habe es auf YouTube gesehen und es ist später auf fast allen großen Websites zu sehen. Es kann verhindern, dass Benutzer beim Laden der Seite auf eine völlig leere Seite starren, was das Benutzererlebnis verbessert

Aber aus Entwicklungsperspektive. Es ist wirklich schwierig, die Authentizität dieser Art von Fortschrittsbalken zu erfassen, da wir den Fortschritt nicht zählen können, bis der Logikcode geladen ist, und der Fortschritt des Logikcodes selbst nicht gezählt werden kann. Darüber hinaus ist es uns unmöglich, den Ladezustand 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 + '%'
    // 父组件数据加载完前进度条最多到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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So übergeben Sie ein Array an den Hintergrundcontroller

Verwenden Sie JS, um List zu empfangen. Sammlungsparameter

Das obige ist der detaillierte Inhalt vonSo verhindern Sie, dass das Laden der Vue-Seite flackert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!