คำสั่ง v-show ใน Vue

อีกทางเลือกหนึ่งสำหรับการแสดงผลแบบมีเงื่อนไข คือคำสั่ง v-show ใช้งานคล้ายกันมาก:

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

ความแตกต่างคือองค์ประกอบที่มี v-show จะถูก เรนเดอร์เสมอและคงอยู่ใน DOM เสมอ และจะสลับเฉพาะ คุณสมบัติ CSS display เท่านั้น

คำสั่ง v-if ดำเนินการเรนเดอร์แบบมีเงื่อนไข "ที่แท้จริง" เพราะรับประกันว่า ตัวฟังเหตุการณ์และคอมโพเนนต์ย่อย ภายในบล็อกจะถูกทำลายอย่างเหมาะสม และถูกสร้างขึ้นใหม่เมื่อเงื่อนไขเปลี่ยน

คำสั่ง v-if ยังขี้เกียจ (lazy): ถ้าเงื่อนไข เป็นเท็จในช่วงเวลาเรนเดอร์เริ่มต้น มันจะไม่ทำอะไรเลย - บล็อกเงื่อนไข จะไม่ถูกเรนเดอร์จนกว่า เงื่อนไขจะเป็นจริง

เมื่อเปรียบเทียบ v-show ง่ายกว่ามาก - องค์ประกอบ จะถูกเรนเดอร์เสมอ โดยไม่ขึ้นกับ สถานะเริ่มต้น และจะสลับตาม CSS

โดยทั่วไป v-if มีต้นทุนการสลับที่สูงกว่า ในขณะที่ v-show มีต้นทุนการเรนเดอร์ครั้งแรก ที่สูงกว่า ดังนั้นควรใช้ v-show หากมีการสลับบ่อยครั้ง และควรเลือกใช้ v-if หากเงื่อนไข อาจจะไม่เปลี่ยนแปลงในระหว่างการทำงาน