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

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

<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 หากเงื่อนไข อาจจะไม่เปลี่ยนแปลงในระหว่างการทำงาน

คำสั่ง v-show ไม่สามารถใช้กับองค์ประกอบ template และไม่ทำงานร่วมกับ v-else

กำหนดให้มีย่อหน้าและปุ่ม จงทำให้ ย่อหน้านั้นสามารถสลับการแสดงผลได้เมื่อกด ปุ่ม

อธิบายความแตกต่างของคำสั่ง v-show และ v-if

อธิบายว่าเมื่อใดควรใช้ คำสั่ง v-show และเมื่อใดควรใช้ v-if

อธิบายว่าคำสั่ง v-show มีข้อจำกัดอะไรบ้าง