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

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 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>

setTimeout(() => {
  onMounted(() => {
    // this won't work.
  })
}, 100)