So gehen Sie mit Flackern um, wenn die Vue-Seite geladen wird

Dieses Mal zeige ich Ihnen, wie Sie mit dem Flackern umgehen, wenn die Vue-Seite geladen wird. Welche Vorsichtsmaßnahmen sind zu beachten? Schauen Sie mal rein.

Der Unterschied zwischen v-if und v-show

v-if wird nur kompiliert, wenn die Bedingung erfüllt ist, während v-show unabhängig davon immer kompiliert wird Die Bedingung ist erfüllt oder nicht. Nach der Kompilierung ist das Anzeigen und Ausblenden von v-show nur ein einfacher Wechsel des Anzeigeattributs von CSS.

Mit anderen Worten: Wenn bei Verwendung von v-if 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. Der Befehl v-cloak kann einen Satz von CSS-Stilen wie den

CSS-Selektor

binden und dieser Satz von CSS wird dann wirksam, bis die Instanz kompiliert ist.

  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>

Zusammenfassung

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

Empfohlene Lektüre:

Wie EL den Kontextparameterwert erhält (mit Code)

JS erstellt Links- und Rechtslisten gegenseitige Bewegungswirkung

Das obige ist der detaillierte Inhalt vonSo gehen Sie mit Flackern um, wenn die Vue-Seite geladen wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!