Life cycle ใน component

Document ต้นฉบับ https://vuejs.org/guide/essentials/lifecycle.html

Life cycle ใน Vue คืออะไร ?

ใน Vue นั้น Component แต่ละตัวจะมีสิ่งที่เรียกว่า "Life Cycle" มันคือ series ของ step ของการเกิดขึ้นและดับลงของ Component

ซึ่งในแต่ละ Phase ของ Component จะมี method ที่ Vue ได้ทำการสร้างมาเพื่อ hook state เอาไว้เพื่อให้เราสามารถจัดการ Component ตาม State เหล่านั้นได้ด้วยเช่นกัน

ภาพจาก Vue document

step การเกิดและดับลงของ Component จะเรียงกันตามภาพนี้ ถ้าลองแยก step มามันจะเกิดขึ้นคือ

1. จังหวะแรกที่ Render Component ขึ้นมา = setup คือเตรียมตัวสำหรับการสร้าง Component ของ Composition API และตามมาด้วย beforeCreated เตรียมตัวสำหรับการสร้าง Component ของ Option API
2. เมื่อ Component เกิดขึ้นมา = ก็จะเข้าสู่ state created คือ Component ถูกสร้างขึ้นมา และทำการ compile เพื่อเตรียมตัวเข้าสู่ state beforeMount
3. หลังจากนั้น Component จะนำข้อมูลที่มาจากทั้ง setup และ created มาประกอบกัน และสร้างเป็น DOM ใหม่ขึ้นมา (render) = หลังจาก render เสร็จ ก็จะแตะ state mounted เพื่อเป็นจุดที่บอกว่า render แล้วเรียบร้อย
4. ที่เหลือ ทุกครั้งที่ template มีการ update เกิดขึ้น ก็จะเป็น state ของ beforeUpdate --> updated
5. สุดท้าย เมื่อ Component กำลังจะถูกเอาออกจากหน้าจอไป (เช่น การหายไปจาก v-if หรือจากเปลี่ยนหน้าด้วย Vue router -- ที่จะพูดใน Session ต่อไป) = จะเป็น state ของ beforeUnmount (ก่อนเอาออก) --> unmounted (เอาออกแล้ว) และ Component ก็จะหายไปจากหน้าจอ

ตัวอย่าง เช่น ถ้าเราจะลองดักจับจาก state mounted ก็จะใช้ onMounted ในการดักจับได้

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

เช่นเดียวกันกับ setup ที่เราใช้เอง อย่างที่เห็นในภาพมันคือ state แรกใน lifecycle ของ Composition = มันเลยเป็นจุดที่เราจะประกาศตัวแปรเอาไว้

https://vuejs.org/api/composition-api-setup.html

ตัวอย่างการใช้ setup

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // expose to template and other options API hooks
    return {
      count
    }
  }
}
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

แต่ทีนี้ เพื่อให้การเขียนมันสั้นลง มันเลยเกิดเป็นอีกท่าหนึ่งคือการใส่ <script setup> เพิ่มเข้ามาแทนการเรียก method setup()

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

อย่างที่เห็นว่า code มันต่างกันพอสมควร แต่ขอให้เข้าใจว่า <script setup> คือการสร้าง function ที่จุด setup ของ component นั่นเอง

state นั้นจะมีประโยชน์เวลาเราใช้งานร่วมกับการต่อกับ API หรือการดึงข้อมูลมากเช่น

• เปิดหน้ามาโหลดข้อมูลก่อน
• ก่อนลบ Component update ข้อมูลก่อนว่าหายไปแล้ว

state พวกนี้จะอำนวยความสะดวกได้

เราจะเล่าเรื่องนี้ไว้โดยประมาณก่อน มีโอกาสเราจะเสริมเรื่อยๆ