Direktif v-show di Vue

Opsi lain untuk menampilkan konten secara kondisional adalah direktif v-show. Penggunaannya sangat mirip:

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

Perbedaannya adalah elemen dengan v-show akan selalu di-render dan tetap berada di DOM, yang berubah hanyalah properti CSS display-nya.

Direktif v-if melakukan rendering kondisional yang "sebenarnya" karena ia memastikan bahwa pendengar acara (event listeners) dan komponen turunan di dalam blok dihancurkan dan dibuat ulang dengan benar saat kondisi berubah.

Direktif v-if juga bersifat malas (lazy): jika kondisinya salah pada saat rendering awal, maka ia tidak akan melakukan apa pun - blok kondisional tidak akan di-render sampai kondisinya menjadi benar.

Sebagai perbandingan, v-show jauh lebih sederhana - elemen selalu di-render, terlepas dari kondisi awal, dengan peralihan berdasarkan CSS.

Secara umum, v-if memiliki biaya peralihan (toggle cost) yang lebih tinggi, sementara v-show memiliki biaya rendering awal yang lebih besar. Jadi, gunakan v-show jika peralihan akan sering terjadi, dan lebih suka v-if jika kondisinya mungkin tidak berubah selama runtime.

Direktif v-show tidak dapat digunakan pada elemen template dan tidak bekerja dengan v-else.

Diberikan sebuah paragraf dan sebuah tombol. Buatlah agar paragraf dapat ditampilkan/disembunyikan (toggle) dengan menekan tombol tersebut.

Jelaskan, apa perbedaan antara direktif v-show dan v-if.

Jelaskan, kapan lebih baik menggunakan directif v-show, dan kapan - v-if.

Jelaskan, batasan apa saja yang dimiliki oleh direktif v-show.