การใช้งาน script setup

Vue Script Setup

<script setup> คือไวยากรณ์พิเศษใน Vue 3 ที่ช่วยให้การเขียน component กระชับและง่ายขึ้น โดยรวม script และ template ไว้ในไฟล์เดียวกัน บล็อก <script setup> จะไม่ต้องการการเรียก export default ทำให้โค้ดสะอาดและเข้าใจง่าย

ตัวอย่างการใช้งาน

<template>
  <button @click="increaseCount">Count: {{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const increaseCount = () => count.value++
</script>

เปรียบเทียบ

• Traditional Script: ใช้ export default และมักจะมีโครงสร้างที่ซับซ้อนกว่า

• Script Setup: ใช้สคริปต์แนว declarative ทำให้สั้นและอ่านง่ายขึ้น ประสิทธิภาพดีกว่าเพราะประมวลผลขณะ compile

ข้อดีของ <script setup>

• ลดความซับซ้อนของโค้ดด้วยการไม่ต้องใช้ export default

• ตัวโค้ดอ่านและเข้าใจได้ง่ายขึ้น

• ประสิทธิภาพดีขึ้นเนื่องจากมีการประมวลผลขณะ compile

ข้อเสียของ <script setup>

• อาจไม่รองรับกับโค้ดหรือโปรเจกต์ที่ใช้โครงสร้างแบบเก่า

• ฟีเจอร์บางอย่างเช่น TypeScript types จำเป็นต้องพิจารณาการใช้งานให้ดีเพื่อให้ทำงานร่วมกันได้อย่างถูกต้อง

สรุป

<script setup> เป็นแนวทางใหม่ในการเขียนโค้ด Vue ที่ให้ความกระชับและความชัดเจนในโค้ด โดยลดความซับซ้อนและเพิ่มประสิทธิภาพการประมวลผล อย่างไรก็ตาม ควรพิจารณาความเข้ากันได้กับโค้ดเก่าหรือการใช้ TypeScript อย่างระมัดระวังเพื่อความถูกต้องในการทำงานร่วมกันในโปรเจกต์ต่างๆ.

อ้างอิง

• sfc-script-setup basic-syntax