ทำความเข้าใจ script setup ใน Vue รุ่น 3.2

ใน Vue3 มีการแนะนำการใช้งาน Composition API ซึ่งเป็นแนวที่แตกต่างในการจัดการ reactive data โดยใช้ ref และ reactive. การใช้ Composition API ได้รับการตอบรับจากนักพัฒนาอย่างกว้างขวาง แต่ก็มีข้อกังวลในการใช้งาน Composition API ใน Single File Component ดังนั้นใน Vue 3.2 จึงได้มีการเพิ่มการใช้งาน <script setup> เพื่อปรับปรุงการใช้งาน Composition API ในส่วนที่เป็นข้อกังวลในหมู่นักพัฒนา

การใช้งาน <script setup> ทำให้การเขียน Composition API ง่ายและกระชับขึ้น เมื่อเราใช้งาน <script setup> เราไม่ต้องมีการใช้งาน named หรือ default export ไม่ต้องใช้ defineComponent เป็นต้น

การใช้งาน script setup

ส่วนที่ง่ายที่สุดในการใช้งาน <script setup> ก็คือ จาก <script> เดิม ก็เพียงเปลี่ยนเป็น <script setup> เท่านั้นเอง