Vue JS 2 Tutorial #26 - Life-cycle Hooks

you know what's going on guys welcome to your 26th of ejs tutorial and in this video we're going to talk about lifecycle hooks okay so when we create a new view instance or component it goes through a specific kind of a 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 the what we're going to look at in this tutorial so when we create a new instance first of all the first life cycle hook that is fired is before create so this is a method that we can put stuff in and fire any code before the component or view 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 event to do with the component or the instance then after it's done that we get another life cycle 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 were 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 store 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 so if we go through the down do we have an L option no okay remember L is that property on the view instance here if we go to main guess listing right here if we don't then when VM mount L 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've specified such is 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 and before it does mount the Dom we get access to another life cycle hook called before mount so if there's anything we want to do just before it mount to the Dom we can pop it into this function and you're probably very rarely user so anyway once it has mounted the doll then would get access to another life cycle hook and at this point we have access to that code in the Dom okay 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 life cycle hook called before update so if you Jess detects that we're changing some data before it updates the Dom with that new data we get this other life cycle hook code before update and we can fight any code there that we want to before the component updates ok after it does and its output to the doll and it will be rendered and then we get this other life cycle function called updated and we can find any code there and access the updated Dom in this function ok so that's one thing that could happen after it's been mounted the other thing is it could be destroyed ok so if we want to get rid of the component or incidents completely we can destroy that component and then before it's destroyed we could pop any colored in this lifecycle hooks that we want to do before it's destroyed then it's going to tear down any kind of components event list is 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 call destroyed so we could do any kind of final cleanup ourselves that we wanted to ok so I want employees to have a lot at this lifecycle diagram and read through this is just the official documentation for view 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 so if we come to this Minges dot view what we're going to do is add on the lifecycle hooks to this component right here so another node is more because that's it before ever bought I'm going to go through just a few of them so a place to come after the message and a little comment saying lifecycle folks and the first hook was before to create 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 created 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 creative and again just a function and inside here will alert created so this occurs when the component has been created then after this will do before mount and by the way this part here we've created would be a good point to go out of 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 both probably better to do in the created lifecycle hook okay so anyway before mount 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 Mount it which is a function of using 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 will do before update so if view view gets a change it is going to occur in this component and it will run this before the change is updated okay in the job 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 rear-ended okay so all load update it and we'll just leave it at that fit out so we'll take a look at this in the browser so save that now and if we view that over here and refresh we have an error and that's because we've placed this semicolon inside your learn function so let's check it out save it again and refresh and at this time you can see before create run so nothing is on the screen at the minute they look at all and this is running before the component has been created if we click OK 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 before mount 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 showed on the screen here when we click OK again it's mounted and when I click after this it's going to show in the browser or place or mounted shows you the browser all right so now then we also have before updates 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 ok 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 before update so this is running before anything's changed in the browser and then press ok then we get updated and even we can't see in the browser just yet it has updated okay and at that point we can't access it in the dot so there we go they are your lifecycle hooks and 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

Channel: The Net Ninja

Views: 81,799

Keywords: vuejs, vue js, vue js tutorial, vuejs tutorial, vue js 2, vue js 2 tutorial, vue js tutorial for beginners, vujs tutorial for beginners, vue js 2 tutorial for beginners, vuejs 2 tutorial, life-cycle hooks, vue js life-cycle hooks, vue js lifecycle, vue js life-cycle, vue life-cycle, vue lifecycle, component lifecycle, component life-cycle, vue js component life-cycle

Id: 8rn3SK4N8Go

Length: 9min 17sec (557 seconds)

Published: Tue May 09 2017