Vue Academy · บทเรียน

onMounted และ onBeforeMount

การเข้าถึง DOM ใน onMounted และเหตุผลที่แทบไม่จำเป็นต้องใช้ onBeforeMount โดยตรง

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

ฮุกที่เกี่ยวข้องกับการเมานต์

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

onMounted: DOM พร้อมใช้งานแล้ว

เมื่อ onMounted ทำงาน เทมเพลตของคอมโพเนนต์ก็เรนเดอร์และอยู่บนหน้าเว็บแล้ว การอ้างอิงเทมเพลตชี้ไปยังองค์ประกอบจริง ดังนั้นงานที่เกี่ยวข้องกับ DOM ควรทำที่นี่

<script setup>
import { ref, onMounted } from 'vue'
const box = ref(null)
onMounted(() => {
  console.log(box.value.offsetWidth)
})
</script>

กรณีใช้งาน: การเริ่มต้นแผนภูมิ

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

<script setup>
import { ref, onMounted } from 'vue'
const canvas = ref(null)
onMounted(() => {
  const ctx = canvas.value.getContext('2d')
  // draw chart with ctx
})
</script>

กรณีใช้งาน: การวัดขนาด DOM

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

onMounted(() => {
  const rect = box.value.getBoundingClientRect()
  console.log(rect.height)
})

กรณีใช้งาน: การดึงข้อมูลเริ่มต้น

การดึงข้อมูลเมื่อคอมโพเนนต์ปรากฏขึ้นเป็นงานคลาสสิกของ onMounted ให้เก็บผลลัพธ์ไว้ในการอ้างอิง เพื่อให้เทมเพลตอัปเดตเมื่อข้อมูลมาถึง

<script setup>
import { ref, onMounted } from 'vue'
const posts = ref([])
onMounted(async () => {
  const res = await fetch('/api/posts')
  posts.value = await res.json()
})
</script>

onMounted ทำงานครั้งเดียว

onMounted ทำงานเพียงครั้งเดียวต่ออินสแตนซ์ของคอมโพเนนต์ หากคอมโพเนนต์ถูกถอดเมานต์แล้วสร้างขึ้นใหม่ในภายหลัง อินสแตนซ์ใหม่จะเรียกใช้ onMounted ของตัวเอง

onBeforeMount: ก่อนการแทรกเพียงเล็กน้อย

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

<script setup>
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
  console.log('about to render')
})
</script>

เหตุใดจึงแทบไม่จำเป็นต้องใช้ onBeforeMount

งานตั้งค่าส่วนใหญ่สามารถทำได้โดยตรงใน <script setup> ซึ่งทำงานก่อนการเมานต์อยู่แล้ว และงานใดก็ตามที่เกี่ยวข้องกับ DOM ต้องรอ onMounted ดังนั้น onBeforeMount จึงมีการใช้งานจริงไม่มากนัก

ข้อผิดพลาดที่พบบ่อย

การพยายามเข้าถึงการอ้างอิงเทมเพลตภายในการตั้งค่าหรือ onBeforeMount จะได้ค่า null องค์ประกอบจะยังไม่มีอยู่จนกว่าการเมานต์จะเสร็จสมบูรณ์ ให้ย้ายการเข้าถึง DOM ไปไว้ใน onMounted เสมอ

<script setup>
import { ref } from 'vue'
const input = ref(null)
console.log(input.value) // null - too early!
</script>

การลงทะเบียนฮุกหลายตัว

คุณสามารถเรียกใช้ onMounted ได้มากกว่าหนึ่งครั้ง โดย callback ทั้งหมดจะทำงานตามลำดับ นี่คือเหตุผลที่ composable แต่ละตัวสามารถลงทะเบียน onMounted ของตัวเองได้อย่างอิสระ

onMounted(() => console.log('first'))
onMounted(() => console.log('second'))

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

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

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

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

สรุปทบทวน

สรุปฮุกการเมานต์:

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

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

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

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

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

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

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

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

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

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

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

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

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

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