รูปแบบขั้นสูงของ Vue
Provide/inject, custom directives, render functions, JSX, teleport, suspense, async components
1จุดประสงค์หลักของ provide/inject ใน Vue 3 คืออะไร?
จุดประสงค์หลักของ provide/inject ใน Vue 3 คืออะไร?
คำตอบ
Provide/inject ช่วยให้ส่งข้อมูลจาก component แม่ไปยัง component ลูกหลานใดก็ได้ โดยไม่ต้องส่ง props ผ่านทุกระดับชั้นกลาง ซึ่งช่วยหลีกเลี่ยง 'props drilling' ที่ต้องส่ง props ผ่านหลายระดับชั้นของ component ที่ไม่ได้ต้องการใช้ มีประโยชน์เป็นพิเศษสำหรับการแบ่งปันข้อมูลแบบ global เช่น การตั้งค่า theme หรือสถานะการยืนยันตัวตน
2จะประกาศค่าด้วย provide ใน component ที่ใช้ Composition API ได้อย่างไร?
จะประกาศค่าด้วย provide ใน component ที่ใช้ Composition API ได้อย่างไร?
คำตอบ
ใน Composition API ให้ใช้ฟังก์ชัน provide ด้วยอาร์กิวเมนต์สองตัว ได้แก่ key (string หรือ Symbol) และค่าที่ต้องการจัดเตรียม เช่นภายใน setup ค่านี้จะสามารถเข้าถึงได้โดย component ลูกหลานผ่าน inject การใช้ Symbol เป็น key รับประกันความไม่ซ้ำกันและหลีกเลี่ยงการชนกันของชื่อ
3ฟังก์ชันหลักของ directive Teleport ใน Vue 3 คืออะไร?
ฟังก์ชันหลักของ directive Teleport ใน Vue 3 คืออะไร?
คำตอบ
Teleport ช่วยให้สามารถ render เนื้อหาของ component ไปยัง node DOM ที่ต่างจากตำแหน่งของมันในต้นไม้ component ของ Vue โดยทั่วไปใช้กับ modal, tooltip และ notification ที่จำเป็นต้อง render ที่ root ของเอกสารเพื่อหลีกเลี่ยงปัญหาเรื่อง z-index และการจัดตำแหน่งด้วย CSS โดย component ยังคงรักษา context ของ Vue ไว้และสามารถเข้าถึงข้อมูลของ component แม่ได้
แอตทริบิวต์ใดที่จำเป็นต้องมีเพื่อใช้ Teleport ใน Vue 3?
Custom directive ใน Vue คืออะไร?
+21 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ 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 และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี