Директива 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, ако услов можда неће бити промењен током извршавања.