ทำความเข้าใจ 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> เท่านั้นเอง ลองมาดูในโค้ดเดิมก่อนที่มีมี <script setup> เราต้องกำหนดทุกอย่างขึ้นมาแล้วก็ return กลับไปเพื่อใช้ในตัวเทมเพลต แบบนี้

<script>
  import { ref, computed } from 'vue'
  export default {
     setup () {
        const a = ref(3)
        const b = computed(() => a.value + 3)

        const changeA = () => { a.value = 2 }
        return { a, b, changeA } // ต้องส่งค่ากลับทุกตัวที่ต้องการใช้งาน
     }
  }
</script>

เมื่อเขียนโดยใช้ <script setup> จะเป็นแบบนี้ครับ

<script setup>
  import { ref, computed } from 'vue'
  // ตัวแปร และ function ทุกตัวจะสามารถใช้งานใน template ได้ทันที
  const a = ref(3)
  const b = computed(() => a.value + 3)

  const changeA = () => { a.value = 2 }
</script>

ประเด็นคืออะไร จริงๆ มันก็คือรูปแบบการเขียนแบบใหม่ที่ทำให้เขียน Single File Component (SFC) ทำได้ง่าย และสั้นกว่าเดิมนั่นแหละครับ

อย่างไรก็ตาม <script setup> ไม่ได้มีการใช้งานแค่นี้ยังมีการใช้งานขั้นสูงอีก แต่ไว้ในบทความต่อไปแล้วกันนะครับ