เปรียบเทียบ ref vs reactive ใน Vue 3: เลือกใช้อะไรดี (พร้อมตัวอย่าง)

การเลือกระหว่าง ref และ reactive เป็นเรื่องสำคัญในการเขียน Vue ด้วย Composition API

ref

• ใช้กับข้อมูลทุกประเภท (primitives, objects, arrays)
• ต้องเข้าถึงค่าผ่าน .value

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

const count = ref(0);
const user = ref({ name: 'Jane' });

console.log(count.value); // 0
console.log(user.value.name); // 'Jane'
</script>

reactive

• ใช้กับ objects และ arrays เท่านั้น
• เข้าถึงค่าได้โดยตรง
• ไม่สามารถ reassign ตัวแปรได้

<script setup>
import { reactive } from 'vue';

const state = reactive({ count: 0, user: { name: 'Jane' } });

console.log(state.count); // 0
console.log(state.user.name); // 'Jane'

// state = {}; // Error: ไม่สามารถทำได้
</script>

สรุป

• ใช้ ref เป็นหลักเพื่อความสม่ำเสมอ
• ใช้ reactive สำหรับ state ที่เป็น object ขนาดใหญ่และซับซ้อน