เข้าใจครับ ผมจะเพิ่ม code ตัวอย่างสำหรับแต่ละ lifecycle hook ที่คุณระบุมา:

onMounted()

ทำงานหลังจาก component ถูก mounted

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

onMounted(() => {
  console.log('Component is mounted')
})
</script>

onUpdated()

ทำงานหลังจาก component ถูก updated

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

onUpdated(() => {
  console.log('Component is updated')
})
</script>

onUnmounted()

ทำงานหลังจาก component ถูก unmounted

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

onUnmounted(() => {
  console.log('Component is unmounted')
})
</script>

onBeforeMount()

ทำงานก่อน component จะถูก mounted

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

onBeforeMount(() => {
  console.log('Component is about to be mounted')
})
</script>

onBeforeUpdate()

ทำงานก่อน component จะถูก updated

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

onBeforeUpdate(() => {
  console.log('Component is about to update')
})
</script>

onBeforeUnmount()

ทำงานก่อน component จะถูก unmounted

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

onBeforeUnmount(() => {
  console.log('Component is about to be unmounted')
})
</script>

onErrorCaptured()

จับ errors ที่เกิดขึ้นใน child components

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

onErrorCaptured((error, instance, info) => {
  console.error('Captured an error:', error, instance, info)
  return false // prevent the error from propagating further
})
</script>

onRenderTracked()

ติดตามการ render ของ reactive dependencies

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

onRenderTracked((event) => {
  console.log('Dependency tracked in render:', event)
})
</script>

onRenderTriggered()

ติดตามเมื่อ re-render ถูก triggered

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

onRenderTriggered((event) => {
  console.log('Re-render triggered by:', event)
})
</script>

onActivated()

ทำงานเมื่อ component ถูก activated ใน <keep-alive>

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

onActivated(() => {
  console.log('Component is activated')
})
</script>

onDeactivated()

ทำงานเมื่อ component ถูก deactivated ใน <keep-alive>

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

onDeactivated(() => {
  console.log('Component is deactivated')
})
</script>

onServerPrefetch()

ทำงานบน server-side ก่อน render

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

onServerPrefetch(async () => {
  // ดึงข้อมูลบน server ก่อน render
  await fetchDataOnServer()
})
</script>