Директива v-show във Vue

Друг вариант за условно показване е директивата v-show. Използва се по много подобен начин:

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

Разликата е, че елементът с v-show винаги ще бъде изобразяван и ще остане в DOM, а ще се превключва само неговото CSS свойство display.

Директивата v-if изпълнява "истинско" условно изобразяване, тъй като гарантира, че слушателите на събития и дъщерните компоненти вътре в блока се унищожават правилно и се пресъздават при превключване на условието.

Директивата v-if също така е мързелива: ако условието е невярно по време на първоначалното изобразяване, тя няма да направи нищо - условният блок няма да бъде изобразен, докато условието не стане истинно.

За сравнение, v-show е много по-проста - елементът винаги се изобразява, независимо от началното състояние, с превключване базирано на CSS.

Като цяло, v-if има по-високи разходи за превключване, докато v-show има по-големи разходи за първоначално изобразяване. Така че използвайте v-show, ако превключванията ще са чести, и предпочитайте v-if, ако условието може и да не се промени по време на изпълнение.