Vue Academy · บทเรียน

onUpdated และ onBeforeUpdate

การตอบสนองต่อการเปลี่ยนแปลงข้อมูลรีแอกทีฟ และการหลีกเลี่ยงวงรอบการอัปเดตไม่รู้จบใน onUpdated

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

ฮุกที่เกี่ยวข้องกับการอัปเดต

เมื่อข้อมูลแบบตอบสนองเปลี่ยนแปลง Vue จะเรนเดอร์คอมโพเนนต์ใหม่ ฮุกสองตัวนี้ทำงานคร่อมช่วงดังกล่าว: onBeforeUpdate ทำงานก่อนแพตช์ DOM และ onUpdated ทำงานหลังจากนั้น

onUpdated: หลังการแพตช์

onUpdated ทำงานเมื่อ DOM ได้รับการอัปเดตให้สะท้อนสถานะแบบตอบสนองใหม่แล้ว ณ จุดนี้ DOM ที่เรนเดอร์จะตรงกับข้อมูลของคุณ

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM is now up to date')
})
</script>

การอ่าน DOM ที่อัปเดตแล้ว

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

<script setup>
import { ref, onUpdated } from 'vue'
const list = ref(null)
onUpdated(() => {
  console.log(list.value.scrollHeight)
})
</script>

กับดักลูปไม่รู้จบ

ห้ามเปลี่ยนแปลงสถานะแบบตอบสนองภายใน onUpdated การทำเช่นนั้นจะเรียกใช้การเรนเดอร์อีกครั้ง ซึ่งจะเรียก onUpdated อีกครั้ง และเกิดการเปลี่ยนแปลงซ้ำ — กลายเป็นลูปไม่รู้จบที่ทำให้แอปค้าง

<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
  count.value++ // BAD: infinite update loop
})
</script>

ใช้ watch แทน

หากต้องการตอบสนองต่อการเปลี่ยนแปลงของค่าใดค่าหนึ่ง ให้ใช้ watch แทน onUpdated การเฝ้าดูจะกำหนดแหล่งข้อมูลหนึ่งแหล่งและหลีกเลี่ยงความเสี่ยงจากลูป ขณะที่ onUpdated ทำงานกับทุกการเรนเดอร์

watch(count, (newVal) => {
  console.log('count became', newVal)
})

onBeforeUpdate: ก่อนการแพตช์

onBeforeUpdate ทำงานหลังการเปลี่ยนแปลงแบบตอบสนอง แต่ก่อนที่ Vue จะแพตช์ DOM ในจุดนี้ DOM ยังคงแสดงค่าเก่าอยู่

<script setup>
import { onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
  console.log('DOM still has old values')
})
</script>

กรณีใช้งาน: ภาพสถานะก่อนการอัปเดต

เนื่องจาก onBeforeUpdate มองเห็น DOM เก่า จึงเหมาะอย่างยิ่งสำหรับบันทึกภาพสถานะก่อนการเปลี่ยนแปลง เช่น บันทึกตำแหน่งการเลื่อนปัจจุบันเพื่อเรียกคืนหลังการอัปเดต

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
const el = ref(null)
let savedScroll = 0
onBeforeUpdate(() => { savedScroll = el.value.scrollTop })
onUpdated(() => { el.value.scrollTop = savedScroll })
</script>

ทำงานกับทุกการเรนเดอร์

ฮุกทั้งสองทำงานในทุกวงจรการอัปเดต ซึ่งอาจเกิดขึ้นบ่อยครั้ง ควรทำให้ callback มีขนาดเล็กและทำงานรวดเร็ว เพื่อหลีกเลี่ยงปัญหาด้านประสิทธิภาพ

ไม่เหมาะสำหรับผลข้างเคียงของข้อมูล

ฮุกเหล่านี้เกี่ยวข้องกับ DOM ไม่ใช่ข้อมูลของคุณ สำหรับการตอบสนองที่ขับเคลื่อนด้วยข้อมูล ให้เลือกใช้ computed สำหรับค่าที่คำนวณจากข้อมูล หรือ watch สำหรับผลข้างเคียงจากแหล่งข้อมูลเฉพาะ

สรุปลำดับการทำงาน

เมื่อเกิดการเปลี่ยนแปลงแบบตอบสนอง ลำดับจะเป็นดังนี้: สถานะเปลี่ยนแปลง, onBeforeUpdate ทำงาน (DOM เก่า), Vue แพตช์ DOM จากนั้น onUpdated ทำงาน (DOM ใหม่)

การเลือกระหว่างฮุกทั้งสอง

onBeforeUpdate: บันทึกสถานะ DOM เก่า เช่น ตำแหน่งการเลื่อนหรือการเลือก
onUpdated: อ่าน DOM ใหม่หลังการแพตช์ — แต่ห้ามเปลี่ยนแปลงสถานะแบบตอบสนองที่นี่

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

ทดสอบความรู้เกี่ยวกับฮุกการอัปเดตของคุณ

สรุปทบทวน

สรุปฮุกการอัปเดต:

onUpdated ทำงานหลังการแพตช์ DOM — ให้อ่านขนาดใหม่ที่นี่
ห้ามเปลี่ยนแปลงสถานะแบบตอบสนองภายในฮุกนี้ เพราะจะเกิดลูปไม่รู้จบ ให้ใช้ watch แทน
onBeforeUpdate ทำงานก่อนการแพตช์โดยมี DOM เก่า — เหมาะสำหรับการบันทึกภาพสถานะ
ฮุกทั้งสองทำงานกับทุกการเรนเดอร์ ดังนั้นควรทำให้เบา

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

บทเรียน “onUpdated และ onBeforeUpdate” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “onUpdated และ onBeforeUpdate”

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

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

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

บทเรียน “onUpdated และ onBeforeUpdate” ใช้เวลานานแค่ไหน

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

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

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

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

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