Easy Way to Understand the VueJS Component Lifecycle Hooks

In this Vue.js tutorial, we are gonna take a deep dive and look at the lifecycle hooks provided from the Vue framework.

Now, we're going to analyze the lifecycle diagram, and then go and implement this into a Vue application. We're also going to extend it, because this lifecycle set of hooks and what they list in the documentation is helpful for understanding, because it's a helpful visual. But I think that it's missing a couple of elements that I personally have had to implement into my own production Vue applications, and so I think it will help for you to see those as well. So we're gonna walk through quite a bit of material in this guide.

So I have a Vue application running right here in the background, and we're going to be looking primarily just at a few different components. So we're going to be looking at a dashboard component, a Vue component right here, and then that has the nested login component.

And so what we're gonna be doing isn't as much building in this guide, we're instead gonna be looking and analyzing to see how exactly the lifecycle process works.

If you are not aware of this, if you've never heard of the lifecycle, or if you're just trying to understand it for the first time, the best analogy that helped me is trying to compare a Vue component to us humans.

So as a human, we are born, we go through different stages in life, and then, even though it may seem dark, we all die at some point. Well, that's the way a Vue component works too. A Vue component is born. We say that a Vue component is created, then it has a number of things happen. It has changes go on, such as data changes, and updates, and those kinds of. And then at a certain time, it also dies, or we say that it is destroyed.

So what we can do with Vue is we can actually listen for and capture those events, each one of those, from created all the way through destroyed, and then update the application based on the state of the component.

So hopefully that starts to make sense. But what really help understand the lifecycle hooks and the entire process was really just getting in and implementing each one of the methods.

I'll provide in the show notes a link to this documentation, 'cause that can help to have a visual. But I think what helps the most is just going in and writing the code.

So I'm going to switch back to our application here, and then opening up Visual Studio code here, you can see that we have our homepage component, which is just rendering out some content, and then our login component. And that's pretty much it. That's pretty basic right now.

So we're gonna start in the dashboard, and I'm gonna go out, and I'm gonna start listing some of these hooks. Now, right now we have a pretty basic setup where we have our data function, then we have a list of the components that we are registering, and then we have one custom method. I usually by convention place these lifecycle hooks right above the methods, I like to have my methods at the very bottom, so I know exactly where they're at. But you could technically put these anywhere inside of the script tag, as long as it's right after the default curly braces.

Now, I'm going to just list off a couple basic ones here first. So I'm gonna say beforeCreate(), and it is a regular method, so you have to have the parens right after it. And then I'm going to console.log and then say beforeCreate, just so we know exactly what's happening here. And then for this one, I'm also gonna say this afterwards, 'cause this can be really helpful in understanding what we're referencing. And then make sure you put a comma there. And then after that say created.

Now, unlike some other methods or names inside of Vue, these are reserved words. So before create is something provided by Vue directly. Created is something provided by Vue. So these are reserved and they are names and functions that are built directly into the Vue source code.

I'm going to copy this console log here, and then change this to say created. And I'm not gonna pass in this or else it'll make the output a little bit messy, and you'll notice that the this that it's referencing is gonna be the same for all these elements.

So let's just start with these two, and then we'll get into some of the other ones after this. So switching back to the browser, I'm going to clear the output, hit refresh, and now you can see that we have some console log statements here. We have before create, and then created. So both of these worked. So they were triggered. Notice that we didn't do anything. All we did was we listed them out inside of the component.

#vuejs #javascript

Full guide and code:

https://www.crondose.com/2018/10/comprehensive-guide-to-the-vue-js-component-lifecycle-hooks/
Follow me:

Twitter: https://twitter.com/jordanhudgens
Instagram: https://www.instagram.com/jordanhudgens/
GitHub: http://github.com/jordanhudgens

Видео Easy Way to Understand the VueJS Component Lifecycle Hooks канала edutechional