Vue'da v-show Direktifi

Koşullu görüntülemenin bir başka seçeneği de v-show direktifidir. Kullanımı oldukça benzer:

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

Fark şu ki, v-show kullanan bir element her zaman işlenecek ve DOM'da kalacaktır, değişen ise sadece onun CSS display özelliği olacaktır.

v-if direktifi "gerçek" koşullu işleme gerçekleştirir, çünkü koşul değiştiğinde bloğun içindeki olay dinleyicilerinin ve alt bileşenlerin doğru şekilde yok edilmesini ve yeniden oluşturulmasını garanti eder.

v-if direktifi aynı zamanda tembeldir: eğer koşul ilk işleme sırasında yanlışsa, hiçbir şey yapmaz - koşullu blok koşul doğru olana kadar işlenmez.

Karşılaştırıldığında, v-show çok daha basittir - element ilk durumundan bağımsız olarak her zaman işlenir ve CSS tabanlı geçiş yapar.

Genel olarak, v-if'in geçiş maliyeti daha yüksektir, v-show ise ilk işleme maliyeti daha yüksektir. Bu nedenle, geçişlerin sık olacağı durumlarda v-show kullanın, ve koşulun çalışma zamanında değişmeme ihtimali varsa v-if'i tercih edin.