So verwenden Sie V-Cloak, um Flash-Probleme in Vue zu lösen

Vue ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen, und immer mehr Entwickler beginnen damit, es zur Entwicklung von Front-End-Schnittstellen in Projekten zu verwenden. Bei der Verwendung von Vue treten manchmal Probleme beim Flashen von Stilen auf. In diesem Artikel wird erläutert, wie Sie V-Cloak in Vue verwenden, um dieses Problem zu lösen.

Was ist ein Style-Flashing-Problem?

Wenn Vue eine Komponente rendert und die Vue-Datenbindung in der Vorlage verwendet wird, werden die Daten zuerst analysiert und dann werden die durch die Datenänderungen verursachten Unterschiede im DOM aktualisiert. Dieser Vorgang dauert eine gewisse Zeit, insbesondere wenn die Daten komplex sind oder viele DOM-Knoten vorhanden sind. Beim Rendern der Komponente kommt es zu einer kurzen Stiländerung. Diese Situation wird als Flash-Frage bezeichnet.

Die folgenden zwei Implementierungen werden jeweils eingeführt:

1. Verwenden Sie das Anzeigeattribut von CSS.

In der Vue-Komponente können Sie das Anzeigeattribut über das Stilattribut auf „Keine“ setzen und es dann im gemounteten Zustand in „Block“ ändern. ) Lebenszyklus. Nachdem die Vue-Komponente gerendert wurde, wird das gesamte CSS geladen, was dazu führt, dass das DOM der Komponente ausgeblendet wird, bis es zum ersten Mal geladen wird.

<template>
  <div class="container" v-cloak>隐藏结果</div>
</template>
<style>
  [v-cloak] {
    display: none;
}
</style>

<script>
export default {
  mounted () {
    this.$nextTick(() => {
      this.show = true
    })
  }
}
</script>

Diese Methode ist relativ einfach und für einfache Seiten geeignet. Wenn die Seite jedoch komplex ist oder einige asynchrone Daten laden muss, ist diese Methode möglicherweise nicht geeignet. Dann können Sie erwägen, V-Cloak zur Implementierung zu verwenden.

2. Verwenden Sie v-cloak

v-cloak ist eine der von Vue bereitgestellten Anweisungen, die zum Ausblenden der unkompilierten Mustache-Syntax verwendet werden kann. Das v-cloak-Element und seine untergeordneten Elemente bleiben display:none, bis die Mustache-Syntax in einen tatsächlichen Wert analysiert wird. Sobald der Vue-Compiler bereit ist, wird das V-Cloak-Element entfernt.

<template>
  <div class="container" v-cloak>显示结果</div>
</template>
<style>
  [v-cloak] {
    display: none;
}
</style>

<script>
export default {
  mounted () {
    this.$nextTick(() => {
      this.show = true
    })
  }
}
</script>

Verwenden Sie die [v-cloak]-Direktive für die Komponente, um das Ausblenden zu steuern, legen Sie den Stil über