Vue Academy · บทเรียน

รีแอกทีฟขั้นสูง: shallowRef และ triggerRef

shallowRef เพื่อประสิทธิภาพ markRaw เพื่อแยกออกจากรีแอกทีฟ และ triggerRef สำหรับการเรียกใช้ด้วยตนเอง

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

นอกเหนือจาก ref และ reactive

ความสามารถในการตอบสนองเชิงลึกของ Vue สะดวก แต่ไม่ใช่สิ่งที่ต้องการเสมอไป สำหรับออบเจ็กต์ขนาดใหญ่หรืออินสแตนซ์ภายนอก การติดตามเชิงลึกอาจสิ้นเปลืองโดยไม่จำเป็น Vue มี shallowRef triggerRef และ markRaw ให้ควบคุมได้อย่างละเอียด

วิธีที่ ref ติดตามข้อมูลเชิงลึก

ref ปกติที่เก็บออบเจ็กต์จะทำให้ออบเจ็กต์ทั้งหมดตอบสนองเชิงลึก การเปลี่ยนแปลงคุณสมบัติที่ซ้อนอยู่จะทำให้เกิดการอัปเดต เหมาะสำหรับ state ขนาดเล็ก แต่มีต้นทุนสูงเมื่อใช้กับโครงสร้างขนาดใหญ่

import { ref } from "vue"

const user = ref({ name: "Ada", prefs: { theme: "dark" } })
user.value.prefs.theme = "light" // triggers update (deep)

shallowRef: มีเพียง .value ที่ตอบสนอง

shallowRef จะติดตามการกำหนดค่าใหม่ให้กับ .value แต่ ไม่ติดตามการเปลี่ยนแปลงภายในค่าที่เก็บไว้ การเปลี่ยนแปลงภายในจึงไม่ทำให้เกิดการเรนเดอร์

import { shallowRef } from "vue"

const state = shallowRef({ count: 0 })
state.value.count++        // does NOT trigger update
state.value = { count: 1 } // DOES trigger (new .value)

เมื่อใดควรใช้ shallowRef

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

const chart = shallowRef(null)
// chart.value = new Chart(...) replaces wholesale

ปัญหาการเปลี่ยนแปลงข้อมูลภายในเชิงลึก

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

const list = shallowRef([1, 2, 3])
list.value.push(4) // mutated, but no update fires

triggerRef: บังคับให้อัปเดต

triggerRef จะบังคับให้เอฟเฟกต์ที่ขึ้นอยู่กับรีฟแบบตื้นทำงานใหม่ด้วยตนเอง หลังจากคุณเปลี่ยนแปลงข้อมูลภายในแล้ว คุณสามารถเปลี่ยนแปลงข้อมูลหลายรายการรวดเดียว แล้วเรียกใช้การกระตุ้นเพียงครั้งเดียว

import { shallowRef, triggerRef } from "vue"

const list = shallowRef([1, 2, 3])
list.value.push(4)
list.value.push(5)
triggerRef(list) // now the UI updates

รูปแบบเพื่อเพิ่มประสิทธิภาพ

รูปแบบนี้คือ เก็บโครงสร้างขนาดใหญ่ไว้ใน shallowRef แล้วเปลี่ยนแปลงข้อมูลได้อย่างอิสระโดยไม่ต้องเสียต้นทุนของระบบตอบสนองในทุกการเปลี่ยนแปลง จากนั้นเรียกใช้ triggerRef เพียงครั้งเดียวเมื่อต้องการให้มุมมองสะท้อนการเปลี่ยนแปลงทั้งหมด

function bulkUpdate(rows) {
  for (const r of rows) data.value.push(r) // cheap
  triggerRef(data)                         // one update
}

markRaw: เลือกไม่ใช้ระบบตอบสนองทั้งหมด

markRaw จะทำเครื่องหมายออบเจ็กต์เพื่อไม่ให้ Vue ทำให้ออบเจ็กต์นั้นตอบสนองโดยเด็ดขาด แม้จะอยู่ภายใน reactive หรือ ref ปกติก็ตาม ใช้สิ่งนี้กับอินสแตนซ์ของคลาสจากบุคคลที่สามที่ไม่ควรถูกครอบด้วยพร็อกซี

import { markRaw, reactive } from "vue"

const state = reactive({
  map: markRaw(new ThirdPartyMap()),
})
// state.map is the raw instance, never a proxy

เหตุผลที่ markRaw สำคัญ

การครอบอินสแตนซ์ของคลาสที่ซับซ้อน (แผนที่ ตัวแก้ไขโค้ด และเว็บซ็อกเก็ต) ด้วยพร็อกซีแบบตอบสนองอาจทำให้การอ้างอิงภายในเสียหายหรือก่อให้เกิดข้อผิดพลาดที่สังเกตได้ยาก markRaw จะคงอินสแตนซ์เหล่านี้ไว้โดยไม่แตะต้อง ขณะเดียวกันก็ยังอยู่ภายในสถานะที่ตอบสนองได้

การใช้เครื่องมือร่วมกัน

เครื่องมือเหล่านี้สามารถใช้ร่วมกันได้: shallowRef ที่เก็บอินสแตนซ์ซึ่งทำเครื่องหมายด้วย markRaw จะให้ช่องที่คุณแทนที่ได้แบบตอบสนอง โดยออบเจ็กต์ภายในจะไม่ถูก Vue ครอบด้วยพร็อกซีเลย เหมาะอย่างยิ่งสำหรับการผสานการทำงานกับระบบภายนอก

const editor = shallowRef(null)
function init(el) {
  editor.value = markRaw(new CodeEditor(el))
}

ต้นทุนของระบบตอบสนองกับการควบคุม

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

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ตรวจสอบความเข้าใจของคุณเกี่ยวกับระบบตอบสนองขั้นสูง

สรุปทบทวน

คุณได้เรียนรู้เครื่องมือควบคุมระบบตอบสนองขั้นสูงดังนี้:

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

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

บทเรียน “รีแอกทีฟขั้นสูง: shallowRef และ triggerRef” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “รีแอกทีฟขั้นสูง: shallowRef และ triggerRef”

shallowRef เพื่อประสิทธิภาพ markRaw เพื่อแยกออกจากรีแอกทีฟ และ triggerRef สำหรับการเรียกใช้ด้วยตนเอง คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “รีแอกทีฟขั้นสูง: shallowRef และ triggerRef” ใช้เวลานานแค่ไหน

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

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

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

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

รีแอกทีฟขั้นสูง: shallowRef และ triggerRef
โรงงานคอมโพสิเบิลและคอมโพสิเบิลแบบรับพารามิเตอร์
เครื่องสถานะด้วย XState ใน Vue
effectScope สำหรับเอฟเฟกต์แบบกลุ่ม

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