Die v-show-Direktive in Vue

Eine weitere Möglichkeit der bedingten Anzeige ist die Direktive v-show. Sie wird sehr ähnlich verwendet:

<template>
	<p v-show="isAuth">
		+++
	</p>
</template>

Der Unterschied besteht darin, dass ein Element mit v-show immer gerendert wird und im DOM verbleibt, während nur seine CSS-Eigenschaft display umgeschaltet wird.

Die Direktive v-if führt ein "echtes" bedingtes Rendering durch, da sie sicherstellt, dass Event-Listener und Child-Komponenten innerhalb des Blocks beim Umschalten der Bedingung ordnungsgemäß zerstört und neu erstellt werden.

Die Direktive v-if ist auch lazy (träge): Wenn die Bedingung zum Zeitpunkt des initialen Renderings falsch ist, wird sie nichts tun - der bedingte Block wird nicht gerendert, bis die Bedingung wahr wird.

Im Vergleich dazu ist v-show viel einfacher - das Element wird immer gerendert, unabhängig vom Ausgangszustand, mit Umschaltung basierend auf CSS.

Allgemein hat v-if höhere Umschaltkosten, während v-show höhere anfängliche Renderkosten hat. Verwenden Sie also v-show, wenn die Umschaltungen häufig sein werden, und bevorzugen Sie v-if, wenn sich die Bedingung während der Laufzeit möglicherweise nicht ändert.

Die Direktive v-show kann nicht auf einem template-Element verwendet werden und funktioniert nicht mit v-else.

Gegeben sind ein Absatz und ein Button. Sorgen Sie dafür, dass der Absatz durch Klicken auf den Button getoggelt wird.

Erklären Sie, worin die Unterschiede zwischen den Direktiven v-show und v-if liegen.

Erklären Sie, wann es besser ist, die Direktive v-show zu verwenden und wann - v-if.

Erklären Sie, welche Einschränkungen die Direktive v-show hat.