Die perfekte Lösung gegen Flackern beim Rendern in Vue

Dieses Mal bringe ich Ihnen die perfekte Lösung für das Flackern beim Vue-Rendering. Was sind die Vorsichtsmaßnahmen beim Umgang mit dem Flackern beim Vue-Rendering?

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-if 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 mehrere bedingte Beurteilungen, aber es gibt nur v-if und v In vue -else gibt es keine Anweisung wie v-elseif. 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 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 v-else des Befehls Probleme auf. Die Lösung besteht darin, das offizielle v-else

durch ein anderes zu ersetzen v-show. Ein Beispiel ist 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

Beim Schreiben der APP-Community-Seite habe ich an einigen Stellen v-show verwendet. Als ich die Seite aktualisierte, stellte ich fest, dass einige Elemente immer noch ihre Gesichter zeigten, selbst wenn die Logik als falsch beurteilt wurde Es sollte nicht angezeigt werden und die Elemente waren klein, was in Ordnung ist. Wenn es etwas Besonderes ist, sah es an einem großen Ort sehr unangenehm aus, also habe ich online gesucht, um zu sehen, ob es eine Lösung gibt, und es stellte sich heraus, dass es eine gab tatsächlich einer.

Methode 1: V-Umhang

官方的解释就一句话：这个指令保持在元素上直到关联实例结束编译。

 光看这句话一头雾水，后面紧接着说了用法：

和 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 vonDie perfekte Lösung gegen Flackern beim Rendern in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!