Made withVue.jsClip

Vue JS 2 Tutorial #26 - Life-cycle Hooks

N

Net Ninja

Creator on the Vue.js channel

Watch on YouTube ↗

102K viewsMay 9, 20179:18 runtime

Learn about the essential Vue.js 2 component lifecycle hooks and how they provide powerful control over your application. This guide walks you through the entire lifecycle journey, from creation to destruction, using the official Vue diagram. Understand when and how to use key…

Chapters

#vuejs#clip#frontend

Understanding the Vue.js Component Lifecycle

A Vue component goes through a series of steps from its creation to its destruction. This is known as the component lifecycle. Vue provides lifecycle hooks, which are functions that allow you to run your own code at specific stages of this lifecycle.

The Four Main Phases

Creation: The component is initialized.
Mounting: The component is inserted into the DOM.
Updating: The component is re-rendered due to data changes.
Destruction: The component is removed from the DOM.

Key Lifecycle Hooks & Their Uses

Hooks are added as methods directly on the component's options object.

Creation Hooks

beforeCreate()
- Fires: At the very beginning, before data observation and event/watcher setup.
- Use Case: Very rare. You do not have access to component data or props yet.
created()
- Fires: After the instance is created. Data, props, computed properties, methods, and watchers are all available.
- Use Case: The ideal place for fetching data from an API.

Tip
Use the created() hook for initial data fetching. While mounted() also works, created() allows you to start fetching data earlier in the process, before the component is even rendered to the DOM.

Mounting Hooks

beforeMount()
- Fires: After the template is compiled, but just before the component is inserted into the DOM. The $el property is not yet available.
- Use Case: Rare.
mounted()
- Fires: After the component has been mounted to the DOM. You now have full access to the rendered component and can interact with the DOM.
- Use Case: Directly manipulating the DOM, integrating third-party libraries that need DOM access.

Important
If you need to access or manipulate the DOM, always do it inside the mounted() hook or later.

Updating Hooks

beforeUpdate()
- Fires: When data changes, just before the component re-renders and patches the DOM.
- Use Case: To perform an action right before the DOM is updated based on a state change.
updated()
- Fires: After a data change causes the component to re-render.
- Use Case: Accessing the DOM after a property update.

Destruction Hooks

beforeDestroy()
- Fires: Right before a component is torn down. The component is still fully functional.
- Use Case: Cleaning up event listeners, timers, or other resources that won't be automatically cleaned up by Vue.
destroyed()
- Fires: After the component has been completely destroyed.
- Use Case: Final cleanup tasks.

Introduction to Vue Lifecycle Hooks

Yo, what's going on guys? Welcome to your 26th VJs tutorial and in this video, we're going to talk about lifecycle hooks. Okay, so when we create a new Vue instance or component, it goes through a specific kind of lifecycle. It has a journey that it goes through and along this lifecycle, we have access to certain functions or methods that fire at certain points through this lifecycle. Okay, so these are called lifecycle hooks, and they're what we're going to look at in this tutorial.

The Creation Phase: beforeCreate and created

So when we create a new instance, first of all, the first lifecycle hook that is fired is beforeCreate. So this is a method that we can put stuff in and fire any code before the component or Vue instance is created. Okay?

Then after that one runs, the instance observes any data. So before this, we don't have access to any data like this thing here. We just have access to nothing, but we can run some code prior to it being created. Then it observes the data, okay? And initializes any kind of events to do with the component or the instance.

Then after it's done that, we get another lifecycle hook. These things here in red are lifecycle hooks, and this one is called created. And this function fires when the component has been created. So if we want to execute any kind of code after the component has been created, we can throw it into this function. Okay, and it will execute after this data and event stuff has been set up. And in this function right here, this created one, we can have access to this data, to this stuff that we pop in here. Okay?

The Mounting Phase: beforeMount and mounted

So if we go further down, do we have an el option? No. Okay, remember el is that property on the Vue instance here. If we go to main.js, this thing right here. If we don't, then when vm.$mount(el) is called, we do this. If we do, does it have a template option? This is just kind of assessing how the instance is set up, etc., but they all kind of lead to the same result.

So basically what it's going to do is compile the template either way. And then when it's compiled the template that we specified, such as this thing right here, this template, once it's done that, then it's about to mount the DOM. So it's not mounted the DOM yet. The component or instance has been created but it's not mounted the DOM. It's not going to appear in our browser just yet.

Understanding the DOM Mounting Hooks

And before it does mount the DOM, we get access to another life cycle hook called beforeMount. So if there's anything we want to do just before it mounts the DOM, we can pop it into this function. And you probably very rarely use that. So anyway, once it has mounted the DOM, then we get access to another lifecycle hook, and at this point we have access to that code in the DOM. Okay?

The Update and Destroy Phases

Because it's been mounted. So if we wanted to reach in and manipulate the DOM in any way, shape, or form, we could do that here. We couldn't do that before here, but we could do it here. Okay?

So when it's been mounted, then there's a couple of different things that could happen. We could either update the component or instance by changing the data in it. We change the state. And when It happens, we get another lifecycle hook called beforeUpdate. So if Vue.js detects that we're changing some data, before it updates the DOM with that new data, we get this other lifecycle hook called beforeUpdate. And we can fire any code there that we want to before the component updates. Okay?

After it does, and it's output to the DOM and it's rendered, then we get this other lifecycle function called updated. And we can fire any code there and access the updated DOM in this function. Okay?

So that's one thing that could happen after it's been mounted. The other thing is it could be destroyed. Okay, so if we want to get rid of the component or instance completely, we can destroy that component. And then before it's destroyed, we could pop any code in this lifecycle hook that we want to do before it's destroyed. Then it's going to tear down any kind of components, event listeners, that kind of thing, anything associated with that component or instance. And then once it's done that, once it's destroyed, it then we get access to this final lifecycle function called destroyed. So we could do any kind of final cleanup ourselves that we wanted to. Okay?

So I would implore you to have a look at this lifecycle diagram and read through this. It's just the official documentation for Vue. The link is down below. So what we're going to do now is just have a look at a few of these lifecycle hooks and place them in one of our components to see what happens. Okay?

Implementing Lifecycle Hooks in a Component

So if we come to this AllNinjas.vue, what we're going to do is add on the lifecycle hooks to this component right here. So I'm not going to do them all because that'll take me forever, but I'm going to go through just a few of them. So we'll place a comma after the methods and a little comment saying 'lifecycle hooks'.

And the first hook was beforeCreate. So if we want to use a lifecycle hook, all we do is pop them in this object right here, okay? And that can open up, and this is very much like this thing here, data, and it's essentially just a function. Okay? So this function will run before it's created. So we can just alert something here and say 'before create' because that's the name of this hook, right? So I'm going to alert the name of the hooks as they happen so we can see them on the screen.

So after that we'll do created and again just a function and inside here we'll alert 'created'. So this occurs when the component has been created. Then after this, we'll do beforeMount. And by the way, this part here, this created, would be a good point to go and fetch any data if you need any data, okay, from a database or something like that. A lot of people use mounted to do that, but probably better to do it in the created lifecycle hook. Okay?

So anyway, beforeMount, this is before the component is mounted, and this is a function again. We'll alert 'before mount' in here. Okay. And then the next one we'll do is mounted, which is a function. Don't do this in capitals. And we'll alert 'mounted'. So again, this is a good place where you can go in and manipulate the DOM once it's been mounted, this component. Okay?

After mounted we'll do beforeUpdate. So if Vue detects a change that is going to occur in this component, it will run this before the change is updated, okay, in the DOM. So we'll alert here 'before update'. And then finally we'll do updated. So this occurs after the DOM has been updated and it's been rendered, okay? So alert 'updated'.

And we'll just leave it at that for now. So we'll take a look at this in the browser.

Demonstrating Creation and Mounting Hooks

So saved that now and if we view that over here and refresh... we have an error, and that's because we've placed the semicolon inside the alert function. So let's take it out, save it again, and refresh. And this time you can see 'before create' runs. So nothing is on the screen at the minute, okay, nothing at all. And this is running before the component has been created. If we click okay, we get 'created' now. Still, nothing is on the screen because although the component has been created, it's not actually been mounted to the DOM. That doesn't happen until down here. Okay?

So okay. beforeMount. Again, we've still not mounted anything, so this is running before we see anything on the screen again. So we've got plenty of opportunity to do things that we need to before it's shown on the screen here. When we click okay again, it's mounted. And when I click after this it's going to show in the browser. Okay, so mounted, shows in the browser. Alright.

Triggering Update Hooks and Recap

So now then, we also had beforeUpdate and updated, and some data needs to change to do that. So what I'm going to do is come down here and delete a ninja. Okay? And when a ninja is deleted, because we're accepting that as a prop right here, it's going to change the data of this component and so hopefully these two are going to run. So let's try that. Delete ninja and we get beforeUpdate. So this is running before anything's changed in the browser. And then press okay, then we get updated. And even though we can't see in the browser just yet, it has updated, okay? And at that point, we can access it in the DOM.

So there we go, they are your lifecycle hooks. The key points are probably created right here, good for fetching data. mounted right here, good for manipulating the DOM once it's been mounted. Same for this thing right here, updated. Okay? So there we go, that is lifecycle hooks in a nutshell.