Complete Vue.js 3 Guide [6/10]

In this lesson, we will talk about Vue lifecycle hooks. Hooks are functions that are automatically executed at pre-defined timings. It is a very efficient way of integrating our custom codes into an established program.

Vue hooks are defined at the component level. Each component has its own hooks. THIS in hook functions point to the owning component instance, thus giving us easy access to component data properties and methods.

The first four hooks mark the four key points in the creation process of a fully functional component instance.

This digram shows the lifecycle of a root component. Things are basically the same for child components.

The two create hooks are executed before and after the app instance is ready. Once the app instance has been fully created, it can accept and store external data.

The two mount hooks are executed before and after the component has been mounted. Only a mounted component is visible to users.

The created hook is the best place to exchange data with the backend API. At this moment, properties defined in the data option have all been created, ready to receive data.

When we modify component properties displayed in the component template, the two update hooks will be triggered. Pay attention here, the two…