การใช้งาน Lifecycle Hooks ใน VueJS มีอะไรบ้าง

บทความใหม่ ปีนี้ โดย Ninenik Narkdee
lifecycle hooks vuejs

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ lifecycle hooks vuejs

ดูแล้ว 760 ครั้ง


เนื้อหาตอนต่อไปนี้ เรามาดูเกี่ยวกับขั้นตอนเกิดขึ้นและใช้งานของ
Component ใน vuejs หรือเข้าใจในชื่อว่า Lifecycle กระบวนการลำดับ
ขั้นตอนต่างๆ ของ Component ซึ่งจริงๆ แล้ว เรายังไม่ได้ลงลึกไปเกี่ยวกับ
component เท่าไหร่นัก แต่ก็มี component หลักหรือที่เรียกว่า root
component ที่เราใช้งานมาตั้งแต่แรก ดังนั้น เราจะใช้ lifecycle ของ root
component นี้มาอธิบาย
 

Lifecycle Hooks คืออะไร

ใน Vue.js Lifecycle Hooks หมายถึงชุดของฟังก์ชันที่ถูกเรียกในช่วงต่างๆ 
ของชีวิตของคอมโพเนนต์ (component) ซึ่งช่วยให้นักพัฒนาสามารถเขียนโค้ด
เพื่อดำเนินการต่างๆ ในช่วงเวลาที่เหมาะสมของวงจรชีวิตคอมโพเนนต์ 
Vue.js มี Lifecycle Hooks หลักๆ ดังนี้:
 

1. onBeforeMount

onBeforeMount(() => {
  console.log('beforeMount: Component is about to be mounted to the DOM.')
})
- ถูกเรียกก่อนที่คอมโพเนนต์จะถูกแทรกลงใน DOM (Document Object Model)
- ใช้สำหรับการเตรียมการก่อนที่คอมโพเนนต์จะถูกแสดงผลบนหน้าเว็บ
 

2. onMounted

onMounted(() => {
  console.log('mounted: Component has been mounted to the DOM.')
})
- ถูกเรียกหลังจากที่คอมโพเนนต์ถูกแทรกลงใน DOM แล้ว
- ใช้สำหรับการทำงานที่ต้องการการเข้าถึง DOM เช่น การเรียก API หรือการตั้งค่า 
Event Listener
 

3. onBeforeUpdate

onBeforeUpdate(() => {
  console.log('beforeUpdate: Data is about to be updated.')
})
- ถูกเรียกก่อนที่คอมโพเนนต์จะถูกอัปเดตเมื่อข้อมูลเปลี่ยนแปลง
- ใช้สำหรับการทำงานที่ต้องการเตรียมการก่อนการเปลี่ยนแปลงของ DOM
 

4. onUpdated

onUpdated(() => {
  console.log('updated: Data has been updated and the DOM has been re-rendered.')
})
- ถูกเรียกหลังจากที่คอมโพเนนต์ถูกอัปเดตและ DOM ถูกแสดงผลใหม่แล้ว
- ใช้สำหรับการทำงานที่ต้องการทราบว่า DOM ได้อัปเดตแล้ว เช่น การอัปเดตข้อมูล
ที่แสดงบนหน้าเว็บ
 

5. onBeforeUnmount

onBeforeUnmount(() => {
  console.log('beforeUnmount: Component is about to be unmounted.')
})
- ถูกเรียกก่อนที่คอมโพเนนต์จะถูกนำออกจาก DOM
- ใช้สำหรับการทำงานที่ต้องการทำความสะอาดหรือยกเลิกการทำงานก่อนที่คอมโพเนนต์
จะถูกนำออก เช่น การลบ Event Listener
 

6. onUnmounted

onUnmounted(() => {
  console.log('unmounted: Component has been unmounted.')
})
- ถูกเรียกหลังจากที่คอมโพเนนต์ถูกนำออกจาก DOM แล้ว
- ใช้สำหรับการทำงานที่ต้องการทราบว่าคอมโพเนนต์ได้ถูกนำออกจาก DOM แล้ว เช่น 
การล้างข้อมูลหรือการหยุดการทำงานที่ไม่ต้องการ
 
นอกจาก Lifecycle Hooks หลักเหล่านี้ Vue.js ยังมี onActivated และ onDeactivated 
ซึ่งใช้กับ keep-alive components:
 

7. onActivated

onActivated(() => {
  console.log('activated: Component in keep-alive is activated.')
})
- ถูกเรียกเมื่อคอมโพเนนต์ถูกเปิดใช้งานในสถานะ keep-alive
- ใช้สำหรับการทำงานที่ต้องการเมื่อคอมโพเนนต์ถูกนำกลับมาแสดงผลอีกครั้ง 
เช่น การรีเฟรชข้อมูล

 

8. onDeactivated

onDeactivated(() => {
  console.log('deactivated: Component in keep-alive is deactivated.')
})
 
- ถูกเรียกเมื่อคอมโพเนนต์ถูกปิดใช้งานในสถานะ keep-alive
- ใช้สำหรับการทำงานที่ต้องการเมื่อคอมโพเนนต์ถูกนำออกจากการแสดงผล เช่น 
การหยุดการทำงานที่ไม่จำเป็น
 
การใช้ Lifecycle Hooks เหล่านี้จะช่วยให้สามารถควบคุมและจัดการการทำงานของ
คอมโพเนนต์ได้อย่างละเอียดและมีประสิทธิภาพมากขึ้นในช่วงต่างๆ ของชีวิตคอมโพเนนต์.
 

ดูตัวอย่างโค้ด

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, 
  onBeforeUnmount, onUnmounted, onActivated, onDeactivated
 } from 'vue'

const message = ref('')

// Lifecycle Hooks
onBeforeMount(() => {
  console.log('beforeMount: Component is about to be mounted to the DOM.')
}) 

onMounted(() => {
  console.log('mounted: Component has been mounted to the DOM.')  
}) 

onBeforeUpdate(() => {
  console.log('beforeUpdate: Data is about to be updated.')  
}) 

onUpdated(() => {
  console.log('updated: Data has been updated and the DOM has been re-rendered.')  
}) 

onBeforeUnmount(() => {
  console.log('beforeUnmount: Component is about to be unmounted.')  
}) 

onUnmounted(() => {
  console.log('unmounted: Component has been unmounted.')  
}) 

onActivated(() => {
  console.log('activated: Component in keep-alive is activated.')
}) 

onDeactivated(() => {
  console.log('deactivated: Component in keep-alive is deactivated.')  
}) 
</script>
<template>
    <h1>Vue.js Lifecycle Hooks Example</h1>
    <input v-model="message" placeholder="Type something..." />
    <p>Message: {{ message }}</p>
</template>

 
 
จากตัวอย่างผลลัพธ์ เราสามารถใช้ onMounted เพื่อให้ทำคำสั่งใดๆ หลังจากที่ component
ได้สิ้นสุดการเรนเดอร์และถูกสร้างและเพิ่มเข้าไปใน DOM แล้ว ในตัวอย่างก็คือ root component
ได้ถูกเพิ่มเข้าไปแล้ว ก็จะทำงานในส่วนของ  onMounted หรือกรณีที่ต้องการให้ทำงานในส่วน
ของก่นอข้อมูลเปลี่ยนแปลง หรือหลังหลังข้อมูลเปลี่ยนแปลงแล้ว อย่างในตัวอย่าง ก็คือ เมื่อมีการ
พิมพ์ข้อความใน input text ทุกครั้งที่พิมพ์ มีการเปลียนแปลง onBeforeUpdate() กับ 
onUpdate() ก็จะเรียกฟังก์ชั่นด้านในให้ทำงาน ตามที่เรากำหนด ถึงแม้ว่าในตัวอย่างจะแสดง
แค่ไม่กี่ event ของ lifecycle hook event ทั้งนี้ก็เพราะเป็น root component ซึ่งถ้า
หากเราสร้าง component เองแล้วนำมาใช้ ก็จะเห็นส่วนอืนๆ เพิ่มเติม เช่น เมื่อลบหรือเอา
component ออก ก็สามารถใช้ onBeforeUnmount() กับ onUnmount() ได้
 

แผนภาพวงจรชีวิตของคอมโพเนนต์  Lifecycle Diagram

เครื่องมือที่ช่วยให้เราเข้าใจขั้นตอนต่างๆ ในวงจรชีวิตของคอมโพเนนต์ได้ดีขึ้น ช่วยให้รู้ว่า
เราสามารถใช้งาน Lifecycle Hooks ใดในช่วงเวลาไหน และสามารถวางแผนการทำงาน
ของคอมโพเนนต์ได้อย่างมีประสิทธิภาพ
 
 
 
ใน Vue.js Lifecycle Diagram จะแสดงขั้นตอนต่างๆ ของคอมโพเนนต์ ซึ่งประกอบด้วย:
 
Initialization (การเริ่มต้น) * ใน vuejs 3 ไม่มีส่วนนี้แล้ว
Mounting (การแสดงผล)
- onBeforeMount: ก่อนที่คอมโพเนนต์จะถูกแทรกลงใน DOM
- onMounted: คอมโพเนนต์ถูกแทรกลงใน DOM แล้ว
Updating (การอัปเดต)
- onBeforeUpdate: ก่อนที่คอมโพเนนต์จะอัปเดตเมื่อมีการเปลี่ยนแปลงของ reactive data
- onUpdated: คอมโพเนนต์ถูกอัปเดตและ DOM ได้รับการอัปเดตตามแล้ว
Unmounting (การทำลาย)
- onBeforeUnmount: ก่อนที่คอมโพเนนต์จะถูกนำออกจาก DOM
- onUnmounted: คอมโพเนนต์ถูกนำออกจาก DOM และทำลายแล้ว
Activated/Deactivated (การเปิดใช้งาน/การปิดใช้งาน)
- onActivated: คอมโพเนนต์ที่อยู่ใน keep-alive ถูกเปิดใช้งาน
- onDeactivated: คอมโพเนนต์ที่อยู่ใน keep-alive ถูกปิดใช้งาน
 
อย่างไรก็ตาม การเรียกใช้งาน Lifecycle Hooks จะต้องเรียกใช้งานแบบ synchronously 
หรือทำไปพร้อมๆ กับการตั้งต่าต่างๆ หรือติดตั้ง component จะเรียกใช้งานหลังขั้นตอน
การตั้งค่าไม่ได้ เช่น รูปแบบด้านล่าง จะไม่ทำงาน
 
setTimeout(() => {
  onMounted(() => {
    // this won't work.
  })
}, 100)
 
ซึ่งไม่ได้หมายความว่า Lifecycle Hooks จะต้องเขียนไว้ภายใน setup() หรือ 
<script setup> เท่านั้น แต่เราสามารถเขียนไว้ในฟังก์ชั่นของไฟล์ภายนอกก็ได้
เพียงเราเรียกงานใน setup() หรือ <script setup> อีกที
 
เนื้อหาเบื้องต้น เกี่ยวกับ Lifecycle Hooks ก็จะประมาณนี้ เป็นแนวทางให้เราได้
เข้าใจภาพรวมของตัว vuejs เพิ่มขึ้น ตอนหน้าจะเป็นอะไร รอติดตาม




กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ



ทบทวนบทความที่แล้ว









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ