ทั้งสองสร้าง สถานะรีแอกทีฟ ใน Composition API แต่พวกมันทำงานต่างกัน ref ห่อมัด ค่าใดๆ (รวมถึง primitives) ในคอนเทนเนอร์รีแอกทีฟ; reactive ทำให้ object กลายเป็นรีแอกทีฟอย่างลึกซึ้งโดยตรง
ทั้งสองสร้าง สถานะรีแอกทีฟ ใน Composition API แต่พวกมันทำงานต่างกัน ref ห่อมัด ค่าใดๆ (รวมถึง primitives) ในคอนเทนเนอร์รีแอกทีฟ; reactive ทำให้ object กลายเป็นรีแอกทีฟอย่างลึกซึ้งโดยตรง
<script setup>
import { ref } from "vue";
const count = ref(0); // wraps a primitive
const user = ref({ name: "Ann" });
function inc() {
count.value++; // ⚠️ in SCRIPT you must use .value
user.value.name = "Bob";
}
</script>
<template>
<p>{{ count }}</p> <!-- ✅ in TEMPLATE, .value is auto-unwrapped -->
</template>
คุณสมบัติหลัก: ใน JavaScript คุณเข้าถึง ref ผ่าน .value; ในเทมเพลต Vue จะแตกออกมาโดยอัตโนมัติ การลืม .value ในสคริปต์เป็นบั๊กสำหรับผู้เริ่มต้นที่พบบ่อยที่สุด
<script setup>
import { reactive } from "vue";
const state = reactive({ count: 0, user: { name: "Ann" } });
state.count++; // ✅ access directly, no .value
state.user.name = "Bob"; // deeply reactive
</script>
reactive ทำงานเฉพาะ objects/arrays (ไม่ใช่ primitives) และคุณใช้คุณสมบัติโดยตรง
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
การกำหนดใหม่ object reactive หรือทำการปลดแล็กคุณสมบัติของมัน ตัดการเชื่อมต่อ จากรีแอกทีฟ — ข้อบกพร่องที่พบได้บ่อย ref ไม่มีปัญหานี้ (คุณกำหนด .value ใหม่)
ref → primitives, and the recommended default (works for everything, easy to reassign)
reactive→ when you want a grouped object of state without .value (but mind destructuring)
ทีมจำนวนมากใช้ ref ทุกที่ เพื่อความสอดคล้อง
ref และ reactive เป็นพื้นฐานของสถานะ Composition API ของ Vue 3
การเข้าใจว่า ref ต้องการ .value ในสคริปต์ (แตกออกมาโดยอัตโนมัติในเทมเพลต) และ reactive สูญเสียรีแอกทีฟเมื่อกำหนดใหม่/ปลดแล็ก ช่วยป้องกันบั๊กรีแอกทีฟที่พบบ่อยที่สุดสองตัวใน Vue