ประสิทธิภาพของ Vue
Virtual DOM, การปรับแต่ง reactivity, v-once, v-memo, lazy loading, code splitting, ขนาด bundle
1Virtual DOM ใน Vue คืออะไร?
Virtual DOM ใน Vue คืออะไร?
คำตอบ
Virtual DOM คือการแทนที่ของ DOM tree จริงในรูปแบบ JavaScript ที่มีน้ำหนักเบา Vue ใช้ Virtual DOM เพื่อลดการจัดการ DOM โดยตรงให้น้อยที่สุด ซึ่งมีต้นทุนสูงในด้านประสิทธิภาพ เมื่อ state เปลี่ยนแปลง Vue จะสร้าง Virtual DOM ใหม่ เปรียบเทียบกับอันเก่า (อัลกอริทึม diffing) แล้วจึงนำเฉพาะการเปลี่ยนแปลงที่จำเป็นไปใช้กับ DOM จริง แนวทางนี้ช่วยลดจำนวนการดำเนินการ DOM ลงอย่างมากและปรับปรุงประสิทธิภาพ โดยเฉพาะสำหรับแอปพลิเคชันที่ซับซ้อนซึ่งมีการอัปเดตจำนวนมาก
2ความแตกต่างหลักระหว่าง ref() และ shallowRef() คืออะไร?
ความแตกต่างหลักระหว่าง ref() และ shallowRef() คืออะไร?
คำตอบ
ref() สร้าง reference แบบ reactive เชิงลึกซึ่งทุก property ที่ซ้อนกันก็เป็น reactive ด้วย ในขณะที่ shallowRef() ทำให้เฉพาะ property .value เท่านั้นที่เป็น reactive เมื่อใช้ shallowRef() การเปลี่ยนแปลงเชิงลึกภายในออบเจกต์จะไม่ทริกเกอร์การอัปเดต ต้องแทนที่ .value ทั้งหมดเพื่อทริกเกอร์ reactivity shallowRef() มีประโยชน์ในการปรับแต่งประสิทธิภาพกับโครงสร้างข้อมูลขนาดใหญ่ที่ไม่จำเป็นต้องมี reactivity เชิงลึก หรือเพื่อผสานรวมระบบ state ภายนอก
3ไดเรกทีฟ v-once มีบทบาทอย่างไร?
ไดเรกทีฟ v-once มีบทบาทอย่างไร?
คำตอบ
ไดเรกทีฟ v-once จะ render element และ element ลูกของมันเพียงครั้งเดียวในระหว่างการ render ครั้งแรก จากนั้นจะปฏิบัติต่อมันเป็นเนื้อหาแบบสถิตสำหรับการ render ครั้งต่อ ๆ ไปทั้งหมด ซึ่งหมายความว่าแม้ข้อมูลจะเปลี่ยนแปลง element นั้นก็จะไม่มีวันถูกอัปเดต ไดเรกทีฟนี้มีประโยชน์ในการปรับแต่งประสิทธิภาพของเนื้อหาแบบสถิตที่ไม่เคยเปลี่ยนแปลงหลังจากการ mount ครั้งแรก เช่น รูปภาพแบนเนอร์ โลโก้ หรือข้อความที่ไม่ต้องการการอัปเดตแบบไดนามิก
directive v-memo ที่ถูกนำมาใช้ใน Vue 3.2+ ทำงานอย่างไร?
markRaw() ใน Vue มีไว้เพื่ออะไร?
+19 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ Vue.js / Nuxt.js อื่นๆ
พื้นฐาน JavaScript
JavaScript สมัยใหม่ (ES6+)
พื้นฐาน Vue
คอมโพเนนต์ Vue
Vue Router
Pinia State Management
Vuex (Legacy)
Composition API
ระบบ Reactivity ของ Vue
พื้นฐาน Nuxt
การดึงข้อมูล (Data Fetching) ใน Nuxt
SSR และ SSG ใน Nuxt
Server Routes ของ Nuxt
โมดูล Nuxt
Composables ใน Vue
ฟอร์มและการตรวจสอบ Vue
การจัดการสถานะใน Nuxt
การทดสอบ Vue
การ Deploy Nuxt และ CI/CD
รูปแบบขั้นสูงของ Vue
TypeScript กับ Vue
การยืนยันตัวตน Nuxt
SEO ด้วย Nuxt
การทำ Internationalization ใน Nuxt
สถาปัตยกรรม Vue
ความปลอดภัยของ Nuxt
ระบบนิเวศ Vue
การย้าย Vue 2→3 & Nuxt 2→3
เชี่ยวชาญ Vue.js / Nuxt.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี