So gehen Sie mit dem Flackern {{}} der Vue-Rendering-Seite um

Dieses Mal zeige ich Ihnen, wie Sie mit dem Flackern {{}} der Vue-Rendering-Seite umgehen. Was sind die Vorsichtsmaßnahmen für den Umgang mit dem Flackern {{}} der Vue-Rendering-Seite? , lass uns einen Blick darauf werfen.

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.

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

Element ist ein registrierter teilweiser Slot, teilweise kompiliert von Vue beim Einfügen. 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('my-partial', '<p>This is a partial! {{msg}}</p>')
<!-- 静态 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 Partials für jede Situation vorregistrieren und dann das Namensattribut des Partials an die Beurteilungsbedingung binden, also Es können mehrere bedingte Urteile realisiert werden.

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, erscheint das von v-show festgelegte ausgeblendete Element, wodurch die Seite flackert Ich habe es an einigen Stellen beim Schreiben der APP-Community-Seite verwendet. Beim Aktualisieren der Seite habe ich festgestellt, dass einige Elemente ihre Gesichter zeigen und nicht angezeigt werden sollten klein, was in Ordnung ist. Wenn es sich um einen besonders großen Ort handelt, war ich sehr unzufrieden, also habe ich online nach einer Lösung gesucht, 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.

Ich war schon beim Lesen dieses Satzes verwirrt, aber ihm folgte die Verwendung:

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

也就是说v-cloak指令可以像CSS选择器一样绑定一套CSS样式然后这套CSS会一直生效到实例编译结束。

 示例代码：

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

 方法二: v-text

vue中我们会将数据包在两个大括号中，然后放到HTML里，但是在vue内部，所有的双括号会被编译成textNode的一个v-text指令。

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

示例代码：

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

小程序开发分享页面后返回首页

Vue双向数据绑定实例详解

Das obige ist der detaillierte Inhalt vonSo gehen Sie mit dem Flackern {{}} der Vue-Rendering-Seite um. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!