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 c9ccee2e6ea535a969eb3f532ad9fe89 fest und versetzen Sie das Element in den ausgeblendeten Zustand. Auf diese Weise können wir vor dem Laden der Vue-Instanz die Komponente verborgen halten und Probleme mit dem Style-Flashen vermeiden, selbst wenn die Komponente viele zeitaufwändige Vorgänge wie asynchrone Anforderungen und berechnete Eigenschaften enthält.

Der Vorteil der Verwendung von V-Cloak besteht darin, dass das V-Cloak-Element automatisch gelöscht wird, nachdem der Vue-Compiler bereit ist, sodass Sie das Anzeigeattribut nicht manuell ändern müssen, was den Code und die Wartung vereinfacht.

Andere Lösungen

Zusätzlich zu den beiden oben genannten Lösungen können wir zur Vorverarbeitung auch das Postcss-Plug-In Autoprefix im Vue-Loader verwenden. Dieses Plugin kann für uns automatisch Präfixe im CSS-Stil hinzufügen. Es löst zwar nicht alle Flackerprobleme, ist aber eine gute Lösung. Die Implementierung ist wie folgt:

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')]
            }
          }
        ]
      }
    ]
  }
}

Zusammenfassung

Es gibt viele Möglichkeiten, das Style-Flash-Problem zu lösen, und die beiden oben genannten Methoden können die erwarteten Ergebnisse erzielen. Die Verwendung von V-Cloak ist eine der besten Möglichkeiten, ein Gesamtbild zu erstellen. Beachten Sie jedoch, dass JavaScript in vielen Fällen Animationen für display:none-Elemente deaktiviert. Seien Sie daher bei der Verwendung von V-Cloak vorsichtig bei der Auswahl von Elementen, die Animationseffekte erfordern.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie V-Cloak, um Flash-Probleme in Vue zu lösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!