Direktyva v-show Vue

Kitas sąlyginio rodymo variantas yra direktyva v-show. Naudojama labai panašiai:

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

Skirtumas tas, kad elementas su v-show visada bus atvaizduojamas ir liks DOM'e, o bus perjungiama tik jo CSS savybė display.

Direktyva v-if atlieka "tikrą" sąlyginį atvaizdavimą, nes garantuoja, kad įvykių klausytojai ir vidiniai komponentai viduje bloko tinkamai sunaikinami ir atkuriami perjungiant sąlygas.

Direktyva v-if taip pat yra tingi: jei sąlyga klaidinga pradinio atvaizdavimo metu, ji nieko nepadarys - sąlyginis blokas nebus atvaizduotas tol, kol sąlyga netaps tiesa.

Palyginus, v-show yra daug paprastesnė - elementas visada atvaizduojamas, nepriklausomai nuo pradinės būsenos, perjungiamas remiantis CSS.

Apskritai, v-if turi didesnes perjungimo išlaidas, o v-show turi didesnes pradinio atvaizdavimo išlaidas. Taigi naudokite v-show, jei perjungimai bus dažni, ir teikite pirmenybę v-if, jei sąlyga gali ir nepasikeisti vykdymo metu.