Using Lifecycle Hooks in Vue Application

In this lecture, we will learn how to use the lifecycle hooks in our application. We will be working with the code from the previous lecture.

The first hook is the before Create Hook, which is called before the Vue instance is initialized. At this moment, we don't have access to the data because Vue hasn't created the proxy methods. We will console.log a message to prove that this method gets called before the create function.

The next lifecycle hook is the created hook, which is set to a function. We will log the message data property successfully in this hook.

The before Mount lifecycle hook gets triggered once the template has been compiled but hasn't been added onto the page yet. We will log the dollar sign element property, which will be set to null at this point.

The mounted lifecycle hook gets called after the template is mounted onto the page. We will log the message data property, which will hold the template after it's been compiled.

The before update lifecycle hook gets called whenever an update in our data occurs. Unfortunately, we don't have access to which property was updated.

The updated lifecycle hook is called after an update occurs. We can access the data inside the application using the Vue developer tools.

The before Unmount lifecycle hook gets triggered before the instance is unmounted. The UNmount lifecycle hook gets triggered after the instance is unmounted.

The lifecycle hooks in Vue are powerful and allow us to access different parts of the view. You may not use all the lifecycle hooks, but they are there when you need them.

video txt