Aesthetic study notes about Vue Instance and Options API on an iPad screen

1. 🎯 ตอนที่ 7: กางพิมพ์เขียว Options API และสถาปัตยกรรมระดับรากฐานของ Vue Instance

2. 📖 เปิดฉาก (The Hook)

ลองจินตนาการถึงการสร้างบ้านดูนะครับ ถ้าเราไม่มี “พิมพ์เขียว” หรือห้องเก็บของที่แบ่งหมวดหมู่ชัดเจน เวลาจะหาค้อน หาน็อต หรือจะเดินสายไฟ ทุกอย่างคงปะปนกันมั่วไปหมดจนหาบั๊กไม่เจอ โค้ด JavaScript ของเราก็เช่นกันครับ

สำหรับน้องๆ ที่เพิ่งเริ่มก้าวเข้ามาในโลกของ Vue.js แม้ว่ายุคนี้คนจะพูดถึงแต่ Composition API กันอย่างแพร่หลาย แต่ “รากฐาน” ที่แท้จริงที่ทำให้ Vue ครองใจนักพัฒนามาอย่างยาวนานคือสิ่งที่เรียกว่า Options API

Options API เปรียบเสมือน “ตะกร้าจัดระเบียบ” ที่บังคับให้เราวางโค้ดอย่างเป็นหมวดหมู่ (มีโซนสำหรับเก็บข้อมูล โซนสำหรับฟังก์ชัน โซนสำหรับคำนวณ) วันนี้พี่จะพามาจิบกาแฟ และเจาะลึกไปที่หัวใจหลักอย่าง Vue Instance และ Options API กันครับ รับรองว่าถ้าแม่นโครงสร้างนี้ การไปต่อยอดในอนาคตจะกลายเป็นเรื่องขนมแน่นอน!

3. 🧠 แก่นวิชา (Core Concepts)

ก่อนที่เราจะไปเขียนโค้ด เราต้องรู้จัก “ผู้จัดการใหญ่” ของแอปพลิเคชันเราเสียก่อน นั่นก็คือ Vue Instance ครับ

👑 1. The Vue Instance (หัวใจของการทำงาน)

ทุกๆ แอปพลิเคชันของ Vue จะเริ่มต้นด้วยการสร้าง Vue Instance ขึ้นมาเสมอ ใน Vue 3 เราจะใช้ฟังก์ชัน createApp() ในการสร้างเจ้านายคนนี้ขึ้นมา หน้าที่ของ Vue Instance คือการเป็น “คนกลาง” (ViewModel) ที่คอยเชื่อมข้อมูล (Data/State) ของเราเข้ากับหน้าจอ (DOM) เมื่อข้อมูลเปลี่ยน หน้าจอก็อัปเดตตามโดยอัตโนมัติ และหลังจากสร้างเสร็จ เราต้องสั่ง mount('#app') เพื่อให้ผู้จัดการคนนี้เข้าไปสิงร่างและควบคุมพื้นที่ในหน้าเว็บของเรา

🗂️ 2. Options API (ตะกร้าจัดระเบียบโค้ด)

ใน Options API เราจะส่ง “อ็อบเจกต์ (Object)” ก้อนหนึ่งเข้าไปให้ Vue Instance ซึ่งประกอบไปด้วยฟิลด์ต่างๆ (Options) ที่มีหน้าที่เฉพาะตัว:

  • 📦 data() (หน่วยความจำ/ข้อมูล): เป็นโซนสำหรับประกาศตัวแปร State ที่ต้องการให้เป็น Reactive (โต้ตอบอัตโนมัติ) กฎเหล็กคือต้องเป็นฟังก์ชันที่ Return Object เสมอ เพื่อให้แต่ละ Component มีชุดข้อมูลเป็นของตัวเอง ไม่ตีกัน
  • 🛠️ methods (กล่องเครื่องมือ/ฟังก์ชัน): เป็นโซนสำหรับเก็บฟังก์ชันการทำงานต่างๆ เช่น การกดปุ่ม หรือการคำนวณที่ต้องรับ Parameter โดยฟังก์ชันในนี้สามารถเข้าถึงตัวแปรใน data ได้ผ่านคำสั่ง this.
  • 🧠 computed (สมองกลนักคำนวณ): ใช้สร้างตัวแปรใหม่ที่ได้มาจากการคำนวณค่า State อื่นๆ จุดเด่นคือมันมีระบบ Caching (จดจำผลลัพธ์) มันจะคำนวณใหม่ก็ต่อเมื่อตัวแปรต้นทางเปลี่ยนเท่านั้น ช่วยประหยัดทรัพยากรเครื่องได้มาก
  • 👁️ watch (ยามเฝ้าระวัง): คอยจับตาดู State แบบเจาะจง เมื่อตัวแปรนั้นๆ มีการเปลี่ยนแปลง มันจะไปสั่งรันโค้ด (Side Effects) ทันที มักใช้เวลาต้องยิง API เมื่อคำค้นหาเปลี่ยน
  • ⏳ Lifecycle Hooks (วงจรชีวิต): เป็นฟังก์ชันพิเศษที่จะถูกเรียกใช้ตามจังหวะเวลาเกิด-แก่-เจ็บ-ตาย ของ Component เช่น created() หรือ mounted()
Diagram showing the structure of Vue Options API

4. 💻 ร่ายมนต์โค้ด (Show me the Code)

เรามาดูหน้าตาของ Options API แบบเต็มๆ ในแอปพลิเคชันตัวนับเลข (Counter) และโชว์ชื่อแบบมีการคำนวณกันครับ:

<div id="app">
  <!-- ส่วนของ Template สำหรับแสดงผล -->
  <h2>ยินดีต้อนรับ: {{ fullName }}</h2>
  <p>คุณกดปุ่มไปแล้ว: {{ count }} ครั้ง</p>
  <button @click="increment">เพิ่มจำนวน</button>
</div>

<script type="module">
import { createApp } from 'vue'

// สร้าง Vue Instance
const app = createApp({
  // 1. ตะกร้า data: เก็บข้อมูล State
  data() {
    return {
      firstName: 'วิสิทธิ์',
      lastName: 'แผ้วกระโทก',
      count: 0
    }
  },
  
  // 2. ตะกร้า computed: สร้างตัวแปรใหม่ที่เกิดจากการคำนวณ
  computed: {
    fullName() {
      // หาก firstName หรือ lastName เปลี่ยน มันจะคำนวณใหม่ให้อัตโนมัติ
      return `${this.firstName} ${this.lastName}`
    }
  },

  // 3. ตะกร้า methods: เก็บฟังก์ชันการทำงาน
  methods: {
    increment() {
      // ต้องใช้ this. นำหน้าเสมอเพื่อเข้าถึงข้อมูลใน Instance
      this.count++
    }
  },

  // 4. ตะกร้า lifecycle: รันตอนที่หน้าจอถูกเชื่อมต่อกับข้อมูลเสร็จแล้ว
  mounted() {
    console.log('DOM mounted - ระบบพร้อมทำงานแล้ว!')
  }
})

// สั่งให้ Vue Instance ไปคุมพื้นที่ใน HTML ที่มี id="app"
app.mount('#app')
</script>

เห็นไหมครับว่า พอเราแบ่งโค้ดออกเป็นตะกร้า data, computed, methods อย่างชัดเจน การไล่อ่านโค้ดก็กลายเป็นเรื่องง่าย เหมือนอ่านสารบัญหนังสือเลยทีเดียว!

5. 🛡️ เคล็ดลับจากคัมภีร์ลับ (Under the Hood / Pro-Tips)

มีหลุมพรางคลาสสิก 2 ข้อที่มือใหม่มักจะตกไปตายเวลาเขียน Options API พี่ขอเตือนไว้ก่อนเลยครับ:

🚨 กฎเหล็กข้อที่ 1: ห้ามใช้ Arrow Functions () => {} กับ methods และ Lifecycle Hooks เด็ดขาด! Vue จะทำการนำตัวแปร this มาผูก (Bind) เข้ากับ Vue Instance ให้อัตโนมัติ เพื่อให้เราเข้าถึง this.count หรือ this.firstName ได้ หากน้องๆ ไปประกาศ method ด้วย Arrow function (เช่น increment: () => { this.count++ }) ตัว this จะหลุดจากบริบทของ Vue ทำให้หาตัวแปรไม่เจอและเกิด Error ทันที!

🚨 กฎเหล็กข้อที่ 2: ทำไม data ถึงต้องเป็นฟังก์ชัน data() { return { ... } }? ทำไมเราถึงประกาศ data: { count: 0 } ตรงๆ แบบเป็น Object ธรรมดาไม่ได้? เหตุผลก็คือ เวลาเราสร้าง Component เพื่อนำไปใช้ซ้ำหลายๆ ที่ (เช่น ปุ่มกด หรือ การ์ดสินค้า) ถ้าเราใช้ Object ธรรมดา ข้อมูลทุกปุ่มจะ “แชร์ตัวแปรเดียวกัน” พอปุ่มนึงโดนกด ปุ่มอื่นจะเด้งตามหมด! การใช้ data() แบบ Function จะทำให้เวลา Vue นำ Component ไปสร้างใหม่ มันจะ Return ชุดข้อมูลที่สดใหม่ (Fresh copy) ไม่ผูกติดกับใครเสมอครับ

6. 🏁 บทสรุป (To be continued…)

Options API นั้นเป็น “คุณครูที่ดีที่สุด” สำหรับผู้เริ่มต้นเรียนรู้ Vue.js เพราะมันช่วยจับมือเราจัดระเบียบโค้ดให้เป็นโครงสร้างที่สวยงาม เข้าใจง่าย และแยกส่วนของหน้าที่ (Separation of Concerns) อย่างชัดเจน แม้ว่าในอนาคตโปรเจกต์ขนาดใหญ่จะเริ่มขยับไปใช้ Composition API กันมากขึ้น แต่ความรู้เรื่อง data, methods, computed, และ watch เหล่านี้ก็ยังคงเป็นพื้นฐานสำคัญที่คุณต้องพกติดตัวไปตลอดการเป็นขุนพล Vue ครับ!

ในตอนถัดไป เราจะเจาะลึกเรื่องการส่งข้อมูลข้าม Component ระหว่างพ่อกับลูก (Props & Emits) ซึ่งเป็นหัวใจหลักในการสร้างหน้าจอระดับสเกลใหญ่ รอติดตามได้เลยครับ!

ต้องการที่ปรึกษาและพัฒนาระบบ Web Application หรือ Frontend Architecture ให้กับธุรกิจของคุณ? ทีมงาน WP Solution พร้อมให้บริการออกแบบและพัฒนาซอฟต์แวร์แบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p