Understanding composable lifecycle functions

In Chapter 1, Starting Your First Vue Project, we learned about the component’s lifecycle and its available hooks in Vue’s Options API. In the Composition API, these lifecycle hooks are now available as standalone functions and need to be imported from the vue package before use.

Generally, the lifecycle functions in the Composition API are similar to the ones from the Options API, with a prefix of on. For example, beforeMount() in the Options API is onBeforeMount() in the Composition API, and so on.

The following is the list of available lifecycle functions from the Composition API, ready to use within the setup() method or <script setup>:

• onBeforeMount(): Before the first render of the component
• onMounted(): After rendering and mounting the component to the DOM
• onBeforeUpdate(): After starting the component’s update process, but before the actual rendering of the updated component
• onUpdated...