Vue-ში v-show დირექტივა

პირობითი გამოსახვის კიდევ ერთი ვარიანტი არის 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-ს, თუ პირობა შეიძლება არ შეიცვალოს პროგრამის შესრულების დროს.