base_ui/hooks/hooks_component.md

1. onBeforeMount This hook is called before the component is mounted to the DOM. It can be used to perform tasks such as:

   Initializing the component
   Setting up event listeners
   Logging component mount
   

import { onBeforeMount } from 'vue'

export function useMyHook() { onBeforeMount(() => { console.log('Component about to mount') }) }

2. onMounted This hook is called when the component is mounted to the DOM. It can be used to perform tasks such as:

   Initializing the component
   Setting up event listeners
   Logging component mount
   

   import { onMounted } from 'vue'

export function useMyHook() { onMounted(() => { console.log('Component mounted') }) }

3. onBeforeUpdate This hook is called before the component is updated. It can be used to perform tasks such as:

   Updating the component's state
   Handling events
   Logging component update
   

   import { onBeforeUpdate } from 'vue'

export function useMyHook() { onBeforeUpdate(() => { console.log('Component about to update') }) }

4. onUpdated This hook is called when the component is updated. It can be used to perform tasks such as:

   Updating the component's state
   Handling events
   Logging component update
   

   import { onUpdated } from 'vue'

export function useMyHook() { onUpdated(() => { console.log('Component updated') }) }

5. onBeforeUnmount This hook is called before the component is unmounted from the DOM. It can be used to perform tasks such as:

   Cleaning up resources
   Logging component unmount
   Handling errors
   

   import { onBeforeUnmount } from 'vue'

export function useMyHook() { onBeforeUnmount(() => { console.log('Component about to unmount') }) }

6. onUnmounted This hook is called when the component is unmounted from the DOM. It can be used to perform tasks such as:

   Cleaning up resources
   Logging component unmount
   Handling errors
   

   import { onUnmounted } from 'vue'

export function useMyHook() { onUnmounted(() => { console.log('Component unmounted') }) }