Frontend Academy · บทเรียน

ref() และ reactive()

สร้างค่าพื้นฐานที่ตอบสนองด้วย ref() ห่อออบเจ็กต์ด้วย reactive() ทำความเข้าใจว่าแต่ละแบบเหมาะใช้เมื่อใด และเข้าถึงค่าของ ref ผ่าน .value อย่างไร

ref() และ reactive() เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

รีแอกทีฟใน Vue 3

Composition API ของ Vue 3 ใช้โครงสร้างพื้นฐานแบบรีแอกทีฟเพื่อติดตามสถานะ ฟังก์ชันสำคัญสองอย่างคือ ref() สำหรับค่าพื้นฐาน และ reactive() สำหรับอ็อบเจ็กต์ การเปลี่ยนแปลงของสิ่งเหล่านี้จะอัปเดต UI โดยอัตโนมัติ

ref() สำหรับค่าพื้นฐาน

ref(value) ห่อหุ้มค่าไว้ในคอนเทนเนอร์แบบรีแอกทีฟ เข้าถึงและแก้ไขค่าผ่าน .value ในสคริปต์ ส่วนใน template Vue จะคลายการห่อหุ้ม ref ให้อัตโนมัติ — ไม่ต้องใช้ .value

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

const count = ref(0);
const name  = ref('Alice');

function increment() {
  count.value++; // .value in script
}
</script>

<template>
  <p>{{ count }}</p>  <!-- no .value in template -->
  <button @click="increment">+</button>
</template>

reactive() สำหรับอ็อบเจ็กต์

reactive(object) ส่งคืนพร็อกซีของอ็อบเจ็กต์ที่มีความเป็นรีแอกทีฟแบบลึก เข้าถึงพร็อพเพอร์ตี้ได้โดยตรง — ไม่ต้องใช้ .value ไม่ว่าที่ใด

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

const form = reactive({
  email: '',
  password: '',
  rememberMe: false
});

// Mutate directly:
form.email = 'user@example.com';
</script>

<template>
  <input v-model="form.email">
</template>

ref เทียบกับ reactive — ควรใช้แบบใด

ใช้ ref() สำหรับค่าพื้นฐาน (สตริง ตัวเลข บูลีน), ค่าที่อาจเป็น null และค่าที่ส่งคืนจาก composables (แยกโครงสร้างได้ง่ายกว่า) ใช้ reactive() สำหรับข้อมูลที่เกี่ยวข้องกันและควรอยู่รวมกันในอ็อบเจ็กต์เดียว

ข้อควรระวังในการแยกโครงสร้าง reactive()

การแยกโครงสร้างอ็อบเจ็กต์รีแอกทีฟทำให้สูญเสียความเป็นรีแอกทีฟ เพราะพร็อพเพอร์ตี้ที่แยกออกมาจะเป็นค่าแบบธรรมดา ไม่ใช่ ref แบบรีแอกทีฟ

const state = reactive({ count: 0 });
const { count } = state; // NOT reactive
count++; // doesn't update Vue's tracking

// Fix: use toRefs() to destructure reactively:
import { toRefs } from 'vue';
const { count } = toRefs(state); // count is now a ref
count.value++;

toRef และ toRefs

toRef(obj, 'key') สร้าง ref ที่เชื่อมโยงกับพร็อพเพอร์ตี้หนึ่งรายการ ส่วน toRefs(obj) จะแปลงพร็อพเพอร์ตี้ทั้งหมดของอ็อบเจ็กต์รีแอกทีฟเป็น ref ที่เชื่อมโยงกันแต่ละรายการ จึงปลอดภัยต่อการแยกโครงสร้าง

import { toRefs } from 'vue';

const user = reactive({ name: 'Alice', age: 30 });
const { name, age } = toRefs(user);
// name and age are refs, still linked to user
name.value = 'Bob'; // user.name also becomes 'Bob'

ref() สำหรับองค์ประกอบ DOM

ใช้ ref(null) ร่วมกับแอตทริบิวต์ ref ที่ตรงกันใน template เพื่อรับการอ้างอิงแบบรีแอกทีฟไปยังองค์ประกอบ DOM หรืออินสแตนซ์ของคอมโพเนนต์ลูก

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

const inputEl = ref<HTMLInputElement | null>(null);

onMounted(() => {
  inputEl.value?.focus(); // now the DOM element is available
});
</script>

<template>
  <input ref="inputEl" type="text">
</template>

isRef และ unref

isRef(val) ตรวจสอบว่าค่าเป็น ref หรือไม่ ส่วน unref(val) จะคลายการห่อหุ้ม ref หรือส่งคืนค่าเดิมหากค่านั้นไม่ใช่ ref ซึ่งมีประโยชน์ใน composables ที่รับได้ทั้ง ref และค่าธรรมดา

import { isRef, unref } from 'vue';

function double(val: Ref<number> | number) {
  return unref(val) * 2; // works with both ref and plain number
}

shallowRef และ shallowReactive

shallowRef() จะเป็นรีแอกทีฟเฉพาะระดับบนสุดเท่านั้น ไม่ทำงานแบบลึก ส่วน shallowReactive() ก็ทำงานในลักษณะเดียวกันกับอ็อบเจ็กต์ ใช้เพื่อเพิ่มประสิทธิภาพเมื่อไม่จำเป็นต้องมีความเป็นรีแอกทีฟแบบลึก เช่น โครงสร้างข้อมูลขนาดใหญ่ที่ไม่เปลี่ยนแปลง

การแก้ไข reactive() เทียบกับการแทนที่

เมื่อใช้ reactive() ให้แก้ไขพร็อพเพอร์ตี้โดยตรง คุณไม่สามารถแทนที่อ็อบเจ็กต์ทั้งก้อนได้ เพราะ reactive() ต้องใช้การอ้างอิงเดิม หากต้องการแทนที่ ให้ใช้ ref() ซึ่งรองรับ ref.value = newObject

const state = reactive({ items: [] });
state.items.push(newItem); // OK
state.items = [newItem];   // also OK (mutating the property)
// state = reactive({ items: [newItem] }); // LOSES REACTIVITY — can't reassign

ความเป็นรีแอกทีฟแบบลึก

โดยค่าเริ่มต้น reactive() จะเป็นรีแอกทีฟแบบลึก — Vue จะติดตามการเปลี่ยนแปลงของอ็อบเจ็กต์และอาร์เรย์ที่ซ้อนอยู่ ซึ่งสะดวกแต่ใช้ทรัพยากรมากได้สำหรับอ็อบเจ็กต์ขนาดใหญ่มาก ควรพิจารณาใช้ shallowReactive ในกรณีที่ต้องคำนึงถึงประสิทธิภาพ

ตรวจสอบความเข้าใจ

เหตุใดการแยกโครงสร้างอ็อบเจ็กต์ reactive() จึงทำให้สูญเสียความเป็นรีแอกทีฟ

สรุป: ref() และ reactive()

ref() ใช้ห่อหุ้มค่าพื้นฐาน โดยเข้าถึงผ่าน .value ในสคริปต์ และจะถูกคลายการห่อหุ้มโดยอัตโนมัติใน template reactive() ทำให้อ็อบเจ็กต์เป็นรีแอกทีฟแบบลึก ให้แก้ไขพร็อพเพอร์ตี้โดยตรง การแยกโครงสร้างทำให้สูญเสียความเป็นรีแอกทีฟ — ให้ใช้ toRefs() ใช้ ref(null) สำหรับการอ้างอิงองค์ประกอบใน template ใช้ shallowRef และ shallowReactive เพื่อเพิ่มประสิทธิภาพ และใช้ isRef กับ unref เป็นเครื่องมือสำหรับ composables

คำถามที่พบบ่อย

บทเรียน “ref() และ reactive()” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ref() และ reactive()” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ref() และ reactive()”

สร้างค่าพื้นฐานที่ตอบสนองด้วย ref() ห่อออบเจ็กต์ด้วย reactive() ทำความเข้าใจว่าแต่ละแบบเหมาะใช้เมื่อใด และเข้าถึงค่าของ ref ผ่าน .value อย่างไร คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “ref() และ reactive()” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy