ใน 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> เท่านั้นเอง