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')
})
}

<!-- <template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello World'
    }
  },
  onBeforeMount() {
    console.log('Component about to mount')
  }
}
</script> -->