Das Problem und die Lösung des Flackerns von {{}} beim Rendern von Vue

v-if und v-show sind möglicherweise die beiden am häufigsten verwendeten Anweisungen in der täglichen Entwicklung. Obwohl sie ähnliche Funktionen zu haben scheinen, gibt es immer noch große Unterschiede zwischen ihnen. Als nächstes werde ich Ihnen in diesem Artikel das Problem und die Lösung des {{}}-Flimmerns während des Vue-Renderings mitteilen. Freunde, die interessiert sind, sollten einen Blick darauf werfen.

v-if und v-show können das sein am häufigsten in der täglichen Entwicklung verwendet Obwohl die beiden Anweisungen ähnliche Funktionen zu haben scheinen, gibt es immer noch große Unterschiede zwischen ihnen.

Der Unterschied zwischen v-if und v-show:

Beim Wechseln von v-if-Blöcken hat Vue.js eine teilweise Kompilierung/ Deinstallationsprozess, da Vorlagen in v-ifs auch Datenbindungen oder Unterkomponenten enthalten können. v-if ist echtes bedingtes Rendering, da es sicherstellt, dass die Ereignis-Listener und Unterkomponenten innerhalb des bedingten Blocks ordnungsgemäß zerstört und zwischen Schaltern neu erstellt werden.

v-if ist auch faul: Wenn die Bedingung beim ersten Rendern falsch ist, wird nichts unternommen – die lokale Kompilierung beginnt erst, wenn die Bedingung zum ersten Mal wahr wird (Kompilierung wird zwischengespeichert).

Im Vergleich dazu ist v-show viel einfacher – Elemente werden immer kompiliert und beibehalten, einfach basierend auf CSS umgeschaltet.

Einfach ausgedrückt besteht der größte Unterschied zwischen den beiden darin, dass v-if nur dann kompiliert wird, wenn die Bedingungen erfüllt sind, während v-show immer kompiliert wird, unabhängig davon, ob die Bedingungen erfüllt sind Von v-show ist es einfach, das Anzeigeattribut von CSS zu ändern.

Anwendbare Szenarien:

Nachdem wir den wesentlichen Unterschied zwischen den beiden verstanden haben, ändert sich auch, wann v-if und wann v zu verwenden ist -show Muss einfach sein.

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.

Zum Beispiel verhalten sich viele Seiten jetzt auf verschiedenen Endgeräten unterschiedlich. Das häufigste Problem ist, dass viele APP-Seiten eine Download-Aufforderung anzeigen, wenn sie auf WeChat geöffnet werden, jedoch nicht innerhalb der APP, wie in diesem Fall Der Status jedes Endes wird beim Laden bestimmt und ändert sich nicht. Daher ist die Verwendung von v-if geeignet, damit der heruntergeladene Teil beim Öffnen in der APP nicht kompiliert wird.

Es ist am besten, v-show an Stellen zu verwenden, an denen Elemente auf der Seite entsprechend unterschiedlichen Bedingungen angezeigt/ausgeblendet werden, da im Grunde die beiden Zustände häufig gewechselt werden müssen, v- Der Wechsel Die Kosten für die Show sind geringer als die für V-IF.

Mehrere Bedingungen

Oft erfordert der Code eine Beurteilung mit mehreren Bedingungen, aber in vue gibt es nur v-if und v-else. keine v-elseif-Direktive. Obwohl es keine ähnliche Anleitung gibt, gibt es dennoch mehrere Möglichkeiten, dieses Problem zu lösen.

Methode 1: Vorlage

<p v-if="xxx"></p>
<template v-else>
<p v-if="yyy"></p>
<p v-else></p>
</template>

Methode 2: teilweise

Das Element ist der Slot eines registrierten Teils, der beim Einfügen von Vue kompiliert wird. Die Elemente selbst werden ersetzt. Das Element muss das Namensattribut angeben.

Dieses Ding erinnert an das native Fragmentelement von JavaScript, ist aber nicht dasselbe. Teiltöne werden in statische und dynamische unterteilt. Um die oben genannten Probleme zu lösen, müssen dynamische Teiltöne verwendet werden.

Beispiel:

// 注册 partial
Vue.partial(&#39;my-partial&#39;, &#39;<p>This is a partial! {{msg}}</p>&#39;)
<!-- 静态 partial -->
<partial name="my-partial"></partial>
<!-- 动态 partial -->
<!-- 渲染 partial，id === vm.partialId -->
<partial v-bind:name="partialId"></partial>

Um das Problem mehrerer Bedingungen zu lösen, können wir die jeweiligen Teilzustände für jede Situation vorregistrieren und dann binden Das Namensattribut des Teils wird zur Beurteilungsbedingung verwendet, sodass mehrere Bedingungsurteile erzielt werden können.

Andere:

1 Die v-if-Direktive kann auf Vorlagenverpackungselemente angewendet werden, v-show unterstützt jedoch keine Vorlage

2 . Wenn v-show auf eine Komponente angewendet wird, treten aufgrund der Priorität der Anweisung v-else Probleme auf. Die Lösung besteht darin, v-else durch eine andere v-show zu ersetzen. Das offizielle Beispiel lautet wie folgt :

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

Wenn die Vue-Seite geladen wird, wird das von v-show festgelegte versteckte Element angezeigt erscheint, wodurch die Seite flackert Beim Schreiben der APP-Community-Seite habe ich an einigen Stellen v-show verwendet. Als ich die Seite aktualisierte, stellte ich fest, dass die Logik falsch war , einige Elemente zeigen ihre Gesichter, wenn sie nicht angezeigt werden sollten, es blitzte vorbei, und es war in Ordnung, wenn das Element klein wäre, aber wenn es ein besonders großer Ort wäre, würde es sehr unangenehm aussehen, also habe ich online gesucht, um es zu sehen wenn es eine Lösung gäbe, und es stellte sich heraus, dass es tatsächlich eine gab.

Methode 1: V-Cloak

Die offizielle Erklärung besteht nur aus einem Satz: Diese Anweisung bleibt auf dem Element, bis die zugehörige Instanz die Kompilierung beendet.

Allein das Lesen dieses Satzes verwirrt mich, aber die Verwendung folgt sofort:

Bei Verwendung zusammen mit CSS-Regeln wie

kann diese Direktive nicht kompilierte Mustache-Tags bis zur Instanz verbergen ist fertig fertig.

[v-cloak] { display: none } Mit anderen Worten, die v-cloak-Direktive kann einen Satz von CSS-Stilen wie einen CSS-Selektor binden, und dieser Satz von CSS wird wirksam, bis die Instanz kompiliert wird.

Beispielcode:

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

Methode 2: V-Text

In vue werden wir Wickeln Sie die Daten in zwei geschweifte Klammern und fügen Sie sie in HTML ein, aber innerhalb von Vue werden alle doppelten Klammern in eine V-Text-Direktive von textNode kompiliert.

 而使用v-text的好处就是永远更好的性能，更重要的是可以避免FOUC (Flash of Uncompiled Content) ，也就是上面与遇到的问题。

示例代码：

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

零基础学习AJAX之AJAX框架

零基础学习AJAX之制作自动校验的表单

ajax的get请求时缓存处理解决方法

Das obige ist der detaillierte Inhalt vonDas Problem und die Lösung des Flackerns von {{}} beim Rendern von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!