1. Lifecycle Hooks คืออะไร?

Lifecycle Hooks ใน Vue.js คือฟังก์ชันที่ทำงานอัตโนมัติตามช่วงเวลาต่าง ๆ ของวงจรชีวิตของ Component ตั้งแต่การสร้าง การแสดงผล การอัปเดต ไปจนถึงการทำลาย Component

Lifecycle Hooks ช่วยให้คุณสามารถควบคุมพฤติกรรมของ Component ในแต่ละขั้นตอน เช่น การดึงข้อมูลจาก API, การตั้งค่าการเริ่มต้น หรือการล้างข้อมูลเมื่อ Component ถูกทำลาย

2. วงจรชีวิตของ Component

Vue.js มี Lifecycle Hooks หลัก ๆ ดังนี้:

ขั้นตอนการสร้าง (Creation)

1. beforeCreate: เรียกใช้ก่อนที่จะสร้าง Instance
2. created: เรียกใช้หลังจากสร้าง Instance และสามารถเข้าถึง data และ methods

ขั้นตอนการแสดงผล (Mounting)

3. beforeMount: เรียกใช้ก่อนที่จะ Render DOM
4. mounted: เรียกใช้หลังจาก Render DOM เสร็จสิ้น

ขั้นตอนการอัปเดต (Updating)

5. beforeUpdate: เรียกใช้ก่อนที่ DOM จะถูกอัปเดต
6. updated: เรียกใช้หลังจาก DOM ถูกอัปเดต

ขั้นตอนการทำลาย (Destroying)

7. beforeUnmount: เรียกใช้ก่อนที่ Component จะถูกทำลาย
8. unmounted: เรียกใช้หลังจาก Component ถูกทำลายเสร็จสิ้น

3. การใช้งาน Lifecycle Hooks

ตัวอย่าง:

<template>
  <div>
    <h1>Lifecycle Hooks Example</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: Component is being created');
  },
  created() {
    console.log('created: Component has been created');
  },
  beforeMount() {
    console.log('beforeMount: DOM is about to be mounted');
  },
  mounted() {
    console.log('mounted: DOM has been mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate: Data is about to change');
  },
  updated() {
    console.log('updated: Data has been updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount: Component is about to be destroyed');
  },
  unmounted() {
    console.log('unmounted: Component has been destroyed');
  }
};
</script>

คำอธิบาย:

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

4. การใช้งานจริงของ Lifecycle Hooks

การดึงข้อมูลจาก API ใน mounted

<template>
  <div>
    <h1>Data from API</h1>
    <p v-if="!data">Loading...</p>
    <p v-else>{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  mounted() {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(json => {
        this.data = json.title;
      });
  }
};
</script>

คำอธิบาย:

• ใช้ mounted เพื่อดึงข้อมูลจาก API เมื่อ Component ถูกแสดงผลใน DOM

การล้างข้อมูลใน beforeUnmount

<template>
  <div>
    <h1>Timer Example</h1>
    <p>Time: {{ time }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 0,
      interval: null
    };
  },
  mounted() {
    this.interval = setInterval(() => {
      this.time++;
    }, 1000);
  },
  beforeUnmount() {
    clearInterval(this.interval);
  }
};
</script>

คำอธิบาย:

• ใช้ beforeUnmount เพื่อเคลียร์ Timer เมื่อ Component ถูกทำลาย

5. สรุป

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับ:

• วงจรชีวิตของ Component ใน Vue.js
• การใช้งาน Lifecycle Hooks เช่น created, mounted, และ beforeUnmount
• ตัวอย่างการใช้งานจริง เช่น การดึงข้อมูลจาก API และการล้างข้อมูล

ในบทถัดไป เราจะศึกษาวิธีการจัดการฟอร์มและการตรวจสอบข้อมูลใน Vue.js!