Дырэктыва 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, калі ўмова можа і не змяніцца падчас выканання.