Vue Academy · บทเรียน

ref กับ reactive: ควรใช้แบบใด

การเข้าถึง ref.value การคลายการห่อ reactive ในเทมเพลต และการใช้ toRefs(), toRef() เพื่อแยกโครงสร้าง

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

เครื่องมือความเป็นรีแอกทีฟสองแบบ

Vue มีวิธีหลักสองแบบในการสร้าง state แบบรีแอกทีฟ ได้แก่ ref() และ reactive() ทั้งสองแบบมีความสามารถทับซ้อนกัน แต่แต่ละแบบเหมาะกับสถานการณ์บางอย่างมากกว่า การรู้ว่าควรเลือกใช้แบบใดจะช่วยให้โค้ดของคุณสะอาด

ref ใช้ได้กับค่าทุกชนิด

ref() สามารถห่อหุ้มอะไรก็ได้: ตัวเลข สตริง บูลีน อาร์เรย์ หรืออ็อบเจ็กต์ ค่าใน JavaScript จะอยู่ใน .value

import { ref } from 'vue'

const count = ref(0)
const name = ref('Alice')
const isOpen = ref(false)

count.value++
name.value = 'Bob'

ref แกะค่าอัตโนมัติในเทมเพลต

แม้คุณต้องเขียน .value ใน JavaScript แต่เทมเพลตจะแกะ ref ระดับบนสุดให้อัตโนมัติ ดังนั้น {{ count }} จึงใช้งานได้ทันที

<!-- template -->
<p>{{ count }} - {{ name }}</p>

reactive ใช้กับอ็อบเจ็กต์

reactive() รับเฉพาะอ็อบเจ็กต์เท่านั้น (รวมถึงอาร์เรย์และ Maps) โดยส่งคืนพร็อกซีที่รีแอกทีฟอย่างลึก และคุณเข้าถึงคุณสมบัติได้โดยตรง — ไม่มี .value

import { reactive } from 'vue'

const state = reactive({
  name: 'Alice',
  age: 30,
  hobbies: ['reading']
})

state.age = 31
state.hobbies.push('coding')

reactive มีความเป็นรีแอกทีฟอย่างลึก

อ็อบเจ็กต์และอาร์เรย์ที่ซ้อนอยู่ภายในอ็อบเจ็กต์ reactive ก็เป็นรีแอกทีฟเช่นกัน การเปลี่ยนคุณสมบัติที่ซ้อนอยู่จะกระตุ้นการอัปเดตโดยไม่ต้องทำงานเพิ่มเติม

const state = reactive({ profile: { city: 'Paris' } })
state.profile.city = 'Berlin' // reactive!

ข้อจำกัดของ reactive: การแยกโครงสร้างทำให้ความเป็นรีแอกทีฟหายไป

หากคุณแยกโครงสร้างอ็อบเจ็กต์ reactive ตัวแปรที่แยกออกมาจะกลายเป็นค่าทั่วไปและสูญเสียความเป็นรีแอกทีฟ นี่คือจุดที่มักพลาดเป็นอันดับหนึ่ง

const state = reactive({ name: 'Alice' })
let { name } = state
name = 'Bob'
// state.name is still 'Alice' - reactivity lost!

วิธีแก้: ใช้ toRefs เพื่อแยกโครงสร้างอย่างปลอดภัย

toRefs() จะแปลงแต่ละคุณสมบัติของอ็อบเจ็กต์แบบรีแอกทีฟให้เป็น ref ตอนนี้คุณจึงแยกโครงสร้างและคงความเป็นรีแอกทีฟไว้ได้ เพราะแต่ละส่วนเป็น ref ที่เชื่อมโยงกลับไปยังแหล่งที่มา

import { reactive, toRefs } from 'vue'

const state = reactive({ name: 'Alice', age: 30 })
const { name, age } = toRefs(state)
name.value = 'Bob' // state.name is now 'Bob'

toRef สำหรับคุณสมบัติเดียว

หากคุณต้องการเพียงคุณสมบัติเดียวในรูป ref ให้ใช้ toRef(state, 'key') ค่านี้จะซิงค์กับอ็อบเจ็กต์ต้นทางทั้งสองทิศทาง

import { reactive, toRef } from 'vue'

const state = reactive({ age: 30 })
const age = toRef(state, 'age')
age.value = 31 // state.age is now 31

กฎใช้งานโดยสรุป

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

ref ก็เก็บอ็อบเจ็กต์ได้เช่นกัน

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

const user = ref({ name: 'Alice' })
user.value.name = 'Bob' // reactive
user.value = { name: 'Carol' } // replace whole object

ตารางสรุป

ref: ใช้ได้กับค่าทุกชนิด ต้องใช้ .value ใน JS แกะค่าอัตโนมัติในเทมเพลต และสามารถกำหนดค่าใหม่ทั้งก้อนได้
reactive: ใช้ได้กับอ็อบเจ็กต์เท่านั้น ไม่มี .value มีความเป็นรีแอกทีฟอย่างลึก แต่การแยกโครงสร้างจะทำให้ใช้ไม่ได้ และไม่สามารถกำหนดค่าใหม่ทั้งอ็อบเจ็กต์ได้
toRefs: ตัวเชื่อมที่ทำให้สามารถแยกโครงสร้างคุณสมบัติแบบรีแอกทีฟได้

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

เลือกเครื่องมือที่เหมาะสม

สรุปทบทวน

ประเด็นสำคัญ:

ref() ห่อหุ้มค่าได้ทุกชนิด และต้องใช้ .value ใน JavaScript
reactive() ใช้กับอ็อบเจ็กต์และมีความเป็นรีแอกทีฟอย่างลึก แต่การแยกโครงสร้างจะทำให้ใช้ไม่ได้
toRefs() ช่วยให้คุณแยกโครงสร้างอ็อบเจ็กต์แบบรีแอกทีฟได้อย่างปลอดภัย
ใช้ ref กับค่าพื้นฐาน และใช้ reactive กับ state ของอ็อบเจ็กต์ที่จัดกลุ่มกัน

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

บทเรียน “ref กับ reactive: ควรใช้แบบใด” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ref กับ reactive: ควรใช้แบบใด”

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

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

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

บทเรียน “ref กับ reactive: ควรใช้แบบใด” ใช้เวลานานแค่ไหน

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

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

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

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

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