ref และ reactive ใน Vue 3

Vue 3 ใช้ระบบ Reactivity ที่ทรงพลังและยืดหยุ่นมากขึ้น โดยมี ref และ reactive เป็นหัวใจหลักของการจัดการ state แบบ reactive ใน Composition API

แนวคิด Reactive State

Reactive State คือข้อมูลที่เมื่อเปลี่ยนค่าแล้ว UI จะอัปเดตอัตโนมัติ เช่น ตัวแปรที่ใช้แสดงผลใน template

ref คืออะไร?

ref ใช้สำหรับสร้างตัวแปร reactive ที่เก็บ primitive (เช่น string, number, boolean) หรือ object ก็ได้
การเข้าถึงค่าต้องใช้ .value เสมอ

ตัวอย่าง

ts

import { ref } from "vue";

const count = ref(0);
count.value++;

ใช้กับ primitive ได้ดี เช่น ตัวเลข, ข้อความ, true/false
ใช้กับ object/array ได้ แต่ต้องเข้าถึงผ่าน .value

reactive คืออะไร?

reactive ใช้สร้าง state แบบ reactive สำหรับ object หรือ array
ไม่ต้องใช้ .value เวลาทำงานกับ property

ตัวอย่าง

ts

import { reactive } from "vue";

const state = reactive({
  count: 0,
  user: { name: "Alice" },
});
state.count++;
state.user.name = "Bob";

ใช้กับ object/array ที่มีหลาย property

เปรียบเทียบ ref vs reactive

จุดเด่น	ref	reactive
ใช้กับ	primitive/object	object/array
Access Value	ต้องใช้ .value	เข้าถึง property ตรง ๆ
Reactivity	ดีทั้งคู่	ดีทั้งคู่
ใช้กับ template	ไม่ต้อง .value	property ตรง ๆ

ตัวอย่างเปรียบเทียบ

ts

// ref
const count = ref(0);
console.log(count.value); // 0

// reactive
const state = reactive({ count: 0 });
console.log(state.count); // 0

ข้อควรระวัง

reactive ไม่รองรับ primitive (string, number, boolean) โดยตรง
ref เมื่อใช้กับ object/array ต้องเข้าถึงผ่าน .value
การกระจายค่า (spread) ของ reactive object อาจทำให้เสีย reactive

สรุปและแนวทางเลือกใช้

ถ้าตัวแปรเป็น primitive หรือใช้เดี่ยว ๆ ใช้ ref
ถ้าเป็น object/array ที่มีหลาย property ใช้ reactive
ใน template สามารถใช้ได้ทั้งสองแบบโดยไม่ต้อง .value
ถ้าอยากให้โค้ดอ่านง่ายและจัดการ state ขนาดใหญ่ ให้ใช้ Store (ดูหัวข้อถัดไป)