Vue Academy · บทเรียน

ภาพรวมระยะวงจรชีวิต

การสร้าง การเมานต์ การอัปเดต และการถอดเมานต์ — สิ่งที่เกิดขึ้นในแต่ละระยะ

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

คอมโพเนนต์มีวงจรชีวิต

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

สี่ระยะหลัก

การสร้าง — setup ทำงานและเริ่มต้นระบบการตอบสนอง
การติดตั้ง — DOM ถูกสร้างและแทรกลงในหน้าเว็บ
การอัปเดต — การเปลี่ยนแปลงแบบตอบสนองจะทำให้เกิดการเรนเดอร์ใหม่
การถอดติดตั้ง — คอมโพเนนต์ถูกนำออกและทำความสะอาด

ระยะที่ 1: การสร้าง

เริ่มแรก อินสแตนซ์ของคอมโพเนนต์จะถูกสร้างขึ้นและเชื่อมต่อระบบการตอบสนอง ใน Composition API <script setup> (หรือ setup()) จะทำงานในระยะนี้ DOM ยังไม่มีอยู่ ดังนั้นคุณจึงยังอ่านองค์ประกอบไม่ได้

สิ่งที่ทำได้ระหว่างการสร้าง

ระยะการสร้างเหมาะสำหรับประกาศสถานะแบบตอบสนองและเริ่มงานที่ไม่เกี่ยวข้องกับ DOM เช่น เริ่มดึงข้อมูล แต่โปรดจำไว้ว่าแม่แบบยังไม่ได้เรนเดอร์ ดังนั้นการอ้างอิง DOM ยังว่างอยู่

<script setup>
import { ref } from 'vue'
const user = ref(null)
// fetch can start here
</script>

ระยะที่ 2: การติดตั้ง

ถัดมา Vue จะสร้างโหนด DOM จริงจากแม่แบบของคุณและแทรกโหนดเหล่านั้นลงในหน้าเว็บ หลังการติดตั้ง การอ้างอิงจากแม่แบบจะชี้ไปยังองค์ประกอบจริง และคุณสามารถวัดขนาดหรือจัดการ DOM ได้

ฮุกการติดตั้ง

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

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
  console.log('in the DOM now')
})
</script>

ระยะที่ 3: การอัปเดต

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

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

onBeforeUpdate จะทำงานก่อน DOM ถูกปรับแก้ และ onUpdated จะทำงานทันทีหลังจากนั้น ฮุกเหล่านี้จะทำงานทุกครั้งที่มีการเปลี่ยนแปลงแบบตอบสนองซึ่งส่งผลต่อการเรนเดอร์

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM patched')
})
</script>

ระยะที่ 4: การถอดติดตั้ง

เมื่อคอมโพเนนต์ถูกนำออก ไม่ว่าจะผ่าน v-if การเปลี่ยนเส้นทาง หรือการนำรายการออก Vue จะทำลายคอมโพเนนต์ นี่คือโอกาสของคุณในการทำความสะอาดตัวจับเวลา ตัวรับฟังเหตุการณ์ และการสมัครรับข้อมูล เพื่อป้องกันหน่วยความจำรั่ว

ฮุกการถอดติดตั้ง

onUnmounted จะทำงานหลังจากคอมโพเนนต์หายไปแล้ว ให้ยกเลิกตัวตั้งเวลาซ้ำ นำตัวรับฟังเหตุการณ์ส่วนกลางออก และยกเลิกคำขอที่กำลังดำเนินการในจุดนี้

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

ลำดับทั้งหมด

ฮุกจะทำงานตามลำดับนี้ตลอดช่วงอายุการทำงานของคอมโพเนนต์: setup, onBeforeMount, onMounted จากนั้นเป็นคู่ onBeforeUpdate/onUpdated ที่เกิดซ้ำ และสุดท้ายคือ onBeforeUnmount/onUnmounted

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

โปรดยืนยันว่าคุณเข้าใจวงจรชีวิตเป็นอย่างดี

สรุปทบทวน

ตอนนี้คุณเห็นภาพรวมทั้งหมดแล้ว:

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

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

บทเรียน “ภาพรวมระยะวงจรชีวิต” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ภาพรวมระยะวงจรชีวิต”

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

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

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

บทเรียน “ภาพรวมระยะวงจรชีวิต” ใช้เวลานานแค่ไหน

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

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

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

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

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