Aesthetic study notes about Reactivity in Vue 3 on an iPad screen

1. 🎯 ตอนที่ 6: ความลับของ Reactivity: Vue 3 รู้ได้อย่างไรว่าข้อมูลเปลี่ยน?

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

น้องๆ เคยสงสัยไหมครับว่า เวลาเราเขียน Vue.js แค่เราสั่งเปลี่ยนค่าตัวแปรปุ๊บ (เช่น count.value++) ข้อความบนหน้าจอเว็บก็เปลี่ยนตามปั๊บ… มันเกิดเวทมนตร์อะไรขึ้นเบื้องหลัง?

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

แต่ในยุคของ Modern Framework อย่าง Vue.js เรามีสิ่งที่เรียกว่า Reactivity System (ระบบปฏิกิริยาตอบสนองอัตโนมัติ) ที่จะมาช่วยปลดแอกโปรแกรมเมอร์จากการแก้ DOM ด้วยมือ วันนี้พี่จะพาไปแง้มดูคัมภีร์ใต้พรมของ Vue 3 กันครับว่า มันรู้ได้อย่างไรว่าข้อมูลเราเปลี่ยน และมันช่วยลดภาระเราไปได้มหาศาลขนาดไหน!

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

ก่อนอื่นเราต้องทำความเข้าใจรูปแบบการเขียนโปรแกรม 2 ขั้วนี้ก่อนครับ:

🎭 Imperative vs. Declarative

  • Imperative (แบบสั่งการทีละขั้นตอน): เหมือนเราสอนคนทำอาหาร ต้องบอกทุกสเต็ป “หยิบกระทะ -> เปิดเตา -> ใส่น้ำมัน -> ตอกไข่” ในโลกของโค้ดคือการที่เราต้องสั่งเบราว์เซอร์ตรงๆ ว่า ให้ไปหา DOM ตัวนี้นะ แล้วเปลี่ยน Text เป็นค่านี้นะ
  • Declarative (แบบประกาศผลลัพธ์): เหมือนเราไปสั่งอาหารที่ร้าน “ขอไข่ดาว 1 ฟองครับ” เราไม่สนว่าพ่อครัวจะทำยังไง เราสนแค่ผลลัพธ์ ในโลกของ Vue คือการที่เรา “ประกาศ (Declare)” ว่า State ก้อนนี้ ให้ผูกติดกับ UI ตรงนี้นะ แล้วเดี๋ยว Vue จะจัดการอัปเดต (Render) ให้เอง

📊 อุปมาอุปไมย: Spreadsheet Analogy

แนวคิดของ Reactivity อธิบายให้เห็นภาพง่ายที่สุดคือ “โปรแกรม Microsoft Excel” ครับ สมมติเรามีเซลล์ A0 = 1 และ A1 = 2 จากนั้นเราตั้งสูตรที่เซลล์ A2 = A0 + A1 (ผลลัพธ์คือ 3) หากวันดีคืนดี เราไปแก้ค่า A0 = 5 เซลล์ A2 จะคำนวณตัวเองใหม่เป็น 6 ให้เราทันทีโดยอัตโนมัติ! นี่แหละครับคือหัวใจของคำว่า Reactivity (การปรับตัวตามการเปลี่ยนแปลงแบบ Declarative)

Diagram showing the comparison between Imperative programming and Declarative programming

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

ลองมาดูการเปรียบเทียบโค้ดระหว่าง Vanilla JS (Imperative) กับ Vue 3 (Declarative) เพื่อให้เห็นความแตกต่างของภาระที่เราต้องแบกรับครับ

❌ แบบที่ 1: Vanilla JavaScript (Imperative Approach) เราต้องสั่งการ DOM ด้วยตัวเองทุกจังหวะ

// 1. กำหนดข้อมูลเริ่มต้น
let message = 'Hello';

// 2. ต้องสั่ง DOM ด้วยตัวเอง (หา Element)
const messageElement = document.getElementById('message');

// 3. สั่งแสดงผลครั้งแรก
messageElement.textContent = message;

// --- เวลาผ่านไป ข้อมูลมีการเปลี่ยนแปลง ---
message = 'Hello World';

// 🚨 4. เราต้อง "สั่งอัปเดต DOM ซ้ำอีกรอบด้วยมือ" ไม่งั้นหน้าจอไม่เปลี่ยน!
messageElement.textContent = message;

✅ แบบที่ 2: Vue 3 Composition API (Declarative Approach) เราแค่ดูแลข้อมูล (State) ส่วนหน้าจอ Vue จัดการให้!

<template>
  <div class="card">
    <!-- Vue จะผูกข้อมูล message เข้ากับ DOM ให้อัตโนมัติ -->
    <h2 id="message">{{ message }}</h2>
    <button @click="updateMessage">เปลี่ยนข้อความ</button>
  </div>
</template>

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

// 1. ประกาศ State เป็น Reactive (ใช้ ref)
const message = ref('Hello')

// 2. เมื่อเกิด Event เราแค่ "เปลี่ยนค่า State" 
const updateMessage = () => {
  message.value = 'Hello World' 
  // ✨ เวทมนตร์ทำงาน: Vue รู้ว่าค่าเปลี่ยน และวิ่งไปอัปเดต <h2> ให้เองทันที!
}
</script>

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

คำถามตัวโตๆ: แล้ว Vue มันรู้ได้ยังไงล่ะว่า message.value ถูกเปลี่ยน? ความลับนี้ไม่ได้มาจากเวทมนตร์ครับ แต่มาจากฟีเจอร์ระดับลึกของ JavaScript สมัยใหม่

ใน Vue 3 ทีมพัฒนาได้ใช้ JavaScript Proxies (สำหรับ reactive()) และ Getter/Setters (สำหรับ ref()) ในการสร้าง “กล่องดักจับ” ข้อมูล

ให้ลองจินตนาการว่า Proxy คือ “ผู้จัดการส่วนตัว (Manager)” ของตัวแปร:

  1. การติดตาม (Track): เมื่อ Template หน้าจอพยายามจะ “อ่านค่า (Get)” จากตัวแปร ผู้จัดการส่วนตัวจะจดชื่อ Template นั้นลงสมุดโน้ตไว้ว่า “อ๋อ มีคนนี้กำลังเฝ้าดูข้อมูลฉันอยู่นะ”
  2. การแจ้งเตือน (Trigger): เมื่อเราไป “แก้ไขค่า (Set)” (เช่น message.value = 'Hello World') ผู้จัดการส่วนตัวจะดักจับการกระทำนี้ได้ แล้ววิ่งไปเปิดสมุดโน้ต ก่อนจะตะโกนบอก Template ที่จดชื่อไว้ว่า “เฮ้ย! ข้อมูลเปลี่ยนแล้ว พวกนายรีบ Re-render อัปเดตตัวเองเดี๋ยวนี้เลย!”

🔥 Pro-Tip ข้อควรระวัง: เนื่องจาก Vue 3 อาศัย Proxy ในการดักจับค่า หากคุณเผลอไปทำลาย Proxy (เช่น การทำ Destructuring อ็อบเจกต์ที่มาจาก reactive() แบบผิดวิธี) ตัวผู้จัดการส่วนตัวจะหลุดหายไปทันที ทำให้หน้าจอของคุณไม่อัปเดตตามข้อมูล (สูญเสีย Reactivity) ดังนั้นจงระมัดระวังการทำ Destructure และให้พึ่งพาฟังก์ชัน toRefs() เข้ามาช่วยเสมอหากจำเป็นครับ!

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

การขยับจากวิธีคิดแบบ Imperative มาเป็น Declarative ถือเป็นก้าวสำคัญของการเป็น Frontend Developer ยุคใหม่เลยครับ

ระบบ Reactivity ของ Vue 3 ช่วยให้เราโฟกัสไปที่ “Business Logic” และ “ข้อมูล (State)” ของแอปพลิเคชันได้อย่างเต็มที่ โดยปล่อยให้งานจุกจิกอย่างการอัปเดตหน้าจอ DOM เป็นหน้าที่ของ Framework ทำให้โค้ดของเราสะอาดขึ้น บำรุงรักษาง่ายขึ้น และบั๊กน้อยลงอย่างเห็นได้ชัด

ในตอนต่อไป เราจะมาเจาะลึก 2 ทหารเสือแห่งโลก Reactivity นั่นก็คือ ref() และ reactive() ว่ามันแตกต่างกันอย่างไร และสถานการณ์ไหนควรเลือกใช้อะไร รับรองว่ากระจ่างแน่นอนครับ!

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