Sobes.tech
Junior

v-show ve v-if direktifleri arasındaki farkları belirtin.

sobes.tech yapay zeka

AI'dan gelen yanıt

v-if koşula bağlı olarak bir öğeyi render eder ve koşul yanlışsa tamamen DOM'dan kaldırır. v-show her zaman öğeyi render eder, ancak koşula bağlı olarak CSS özelliği display'i none ve orijinal değer arasında değiştirir.

Performans / kullanım farkları:

  • v-if: Daha ağır başlangıç render'ı, ancak nadiren değişen koşullarda daha iyi performans sağlar, çünkü öğeler tamamen DOM'dan kaldırılır.
  • v-show: Daha hafif başlangıç render'ı, ancak sık değişen öğeler için daha uygundur, çünkü sadece CSS özelliği değiştirilir.

Kullanım örneği:

<!-- v-if kullanımı -->
<template>
  <div v-if="isVisible">
    Bu blok yalnızca isVisible doğruysa görünür
  </div>

  <!-- v-show kullanımı -->
  <div v-show="isVisible">
    Bu blok her zaman DOM'dadır, ancak yalnızca isVisible doğruysa görünür
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
}
</script>