In this lecture, we will look into lifecycle hooks. So what are lifecycle hooks? lifecycle hooks are a very interesting concept. With the help of lifecycle hooks, we can understand when the component is being created when it is being destroyed when it is being updated, and when it is being mounted and not bore. So let's pull in the lifecycle hook flowchart. And we can look into that.

So this is the lifecycle hook flowchart. So if you can see the first thing, what we're doing is we are creating a new view instance or upon creating the new view instance it sets up all the events and lifecycle methods, so initializing events and life cycles, then what happens is, it fires off a lifecycle hook method, these before creating created, so and what are the hooks that we have outside of flowchart we can use these to run some code or we can use this to perform an action between these lifecycle events. So the first one is before create. So we can use before create before the view component has reactivity induced into it, as you can see after because we have the initiating of injections and reactivity, right So, after that the component is being created. So, so these lifecycle hooks are very, very important. I mean, these lifecycle hooks can be very useful.

So for example, before create and create either of these can be used to perform a network request. So while the component is being mounted and loaded, we can perform a network request and we can get the data. And once the component is created, basically checks for an element option. So, if you remember from the first lecture, when we integrated view into a existing website, we have an element option. So, if it has an element component will check for template option. But if it doesn't have an element component will go for mounting.

So, it'll check for the template after checking for the template. So if it has a template, it will compile that template into a render function. But if it doesn't have a template, it will compile the elements outer HTML template. So then we can go on to before mount and mounted. So these two are related to mounting the element onto the DOM, or getting the component onto the DOM. And after mounted, we have a couple of interesting lifecycle hooks such as before update an updated so these two lifecycle hooks can be used when the virtual DOM is being updated, or before the DOM is being updated or post, the DOM has been updated.

So we can perform some sort of action or either of these lifecycle hooks. So we can also monitor when the component is being destroyed. So before destroy and destroyed are the lifecycle hooks used for that. So in before destroy, we could perform some sort of saving the actions or if you can perform some sort of navigation actions, etc, and destroyed post destroyed, you could send out an event, or you could emit out an event, anything you might want to do when your component gets destroyed. Right. So these are the lifecycle hooks.

So let's try it out in our actual component so we can understand how it actually works. So what we'll do is we'll start off with the app component. So inside the app component, we'll have some data. This is the app component, right? So if I save it, and we can use the lifecycle hooks inside the script tag, similar to any of the properties, so we'll start the lifecycle hooks from the beginning. We'll create the before creating created methods before create so for every library Take a look let's create an alert message so we can understand when the lifecycle hook is being called.

After before create we get the created. Once created is done, we get the before mount and mounted. So before mountain mounted are used to mount the component onto the dome. So instead mounted we can say alert, mounted, and hopefully after mounted, so at this point, we can see the h1 tag whatever is here, this is the app component. It won't be it won't be visible to us until the mounted function is executed. So once the component is mounted onto the DOM, then we can see the component or I'm sorry, we can see the element.

So then we have two more lifecycle hooks before destroy and destroyed. I guess we're looking at before destroy and destroyed, we might have to create another component. So for now we'll just go with the two more lifecycle hooks before upgrading updated Alright, if I save it, I have it running in the local server. And if I say local server we get the first alert. So initially it is a stage of before create. So once the before create is done so so now it has created a new view instance.

And it has initialized the events in lifecycle hooks. So once the lifecycle events have been initialized, we can have access to the lifecycle hooks. So hence the befo create method. And if I say okay, I'm sorry. So if I refresh it, so if I say okay, I get the created and at this point of time, it will check for the element option and to refresh again. So after created if I say okay, I'm going to get the before bound.

So now it's going to mount the component onto the dome. So if I say okay, now mounted is done. So after clicking OK, we should be able to see the h1 tag. So okay, and that h1 tag. So that's what we wrote, right? So now before we look into before destroyed and destroyed, let's look into before upgrading updated right.

So for that to work let's go to another window. We'll throw that in there. Yeah, for that to work we need to create a data component i mean data property inside the data property, let's have a variable, let's say name, just a common example. And let's have an input field placeholder enter name and let's bind it to name using the model. So now if I save it, so what and the component has to refresh right? So if I I'll have to go through every single thing again.

And before mount and before destroy, yeah, so since the component is being rebuilt again, we are getting there before destroy and destroyed lifecycle hooks here. So mounted and this is the component and here's the name. So every single time I enter something onto this, so every single time I enter something onto this, the DOM changes or the data property changes, and the DOM has to update, right. So every single time the DOM has to update, it will fire of the lifecycle hooks before update and update, let's say entered, we and navigate the before update. So before upgrade, we could perform some sort of action. Before the DOM is getting updated.

We can perform any action if we want to. And once the update is done, we'll get another lifecycle hook that says updated. So inside this updated method, we can either intimate the user that some data has been changed or anything has been done. If I say, okay, that's you. So that will happen for every single instance, because I have an alert for every before updating updated, right. So now let's look into before destroy and destroyed.

To understand this much better, let's pull in the login component instead Login we'll let's just throw in the before destroy and destroy it right so let's also comment these out, save them Alright, so the reason why I have login form here is let's also come in these out. Since will not be needing these. Let's also create a button that says destroy login component and inside the data property let's have a boolean value. And for login let's have a Vf. Show login. For the button, let's have an event.

Click event and we can just alter the value of show logon. Since it's a single line, we can just start it So if everything went right, if this component is destroyed, it should fire off to events that says before before destroyed and destroyed. So let's try that. So if I press destroy logging component i get before destroyed. And if I say okay, I get a destroyed, then the login component is no longer visible. So if I click again it appears and I can destroy it again.

Right so that's good. So these are lifecycle hooks and in the next lecture we will look into routing, what is view router and how why routing is required. And that's it for this one. I'll see you the next one.