Lifecycle Hooks

Every Vue component has a life cycle. Within this, some functions are executed sequentially, which are called hooks. We can add custom code in a hook by invoking its corresponding method.

For Composition API we can make use of the hooks like this:

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

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

In the case of Options API we declare a method with the name of the hook:

export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}

These are the available hooks in a Vue component:

References

• https://vuejs.org/guide/essentials/lifecycle.html
• https://vuejs.org/api/composition-api-lifecycle.html