- [Instructor] Sometimes you'll need to take care of things
at different points in the life of a view application.
And to do that you use lifecycle hooks.
Lifecycle hooks allow you to hook
onto different events that will happen
as a result of the life of your application.
Here's a list of all the ones that are available to you
and some of these are in blue referring
to regular life cycle methods that you can hook into.
And there's a couple that you see here that are in purple
that are referring to dynamic components
which is a little bit more complicated.
And the ones in green
refer to things that happen in sub-components.
Now what you use depends on what you need access to.
So although more than one
of these methods might work for your needs
you need to be mindful of what's available at each level.
If you take a look at this graph
you can see when the different events take place
in what's available to you
at different times in your application.
Some of these events like before, update and updated
will happen over and over again as the data changes
and the reactivity happens in your application.
So a couple of things to watch out for
one of the things that is really important
in JavaScript is a variable called this.
Now in
(indistinct)
the value of this is bound to the different lifecycle hooks.
And that can create a problem with ES6's arrow functions.
You might be tempted to call a lifecycle hook
like this using arrow functions,
but the meaning of this
in an arrow function is different than a normal JavaScript.
So you want to use the regular functional syntax
when working with these lifecycle hooks.
Now lifecycle hooks appear in the same level as data
which is also where you put things
like computer properties and methods.
So you just call the individual hooks
and then you do something in their functions.
Now, this is definitely a place
where you'll want to look at the documentation.
This link right here
shows you exactly what's available to you
at each one of the different hooks.
So let's take a look at how we can practice lifecycle hooks.
I've set up this problem right here for you.
It's exactly what we did in the last video
which just has this application all set up for you.
The only difference here is that
we're using a very large products array here
and we're going to simplify that using lifecycle hooks
You can look at the solution right here
and the difference between the two over here.
What we want to do is clear out our products array
and then it create a lifecycle hook
using JavaScript fetch API
which you can find right here,
we can load up the products into our application.
And you can load that from this URL
and if you want to you can try different hooks
to see how they work with this process.
So let's go ahead and get start it.
Now, what I'm going to do do here
is go to this products array
and just clear it out.
We're just going to make it into an array.
It's going to be kind of difficult
because it's going to want to open at first like this.
So let's go ahead and collapse it.
I think I can get away with just choosing it like this
just going all the way to the first line
and I'm going to hit the delete button
and then just type in the array notation.
So that will bring up an empty array.
And now what I can do is create
one of the life cycle methods.
So I'm going to use the created method here
in this function call.
I'm going to use the fetch API
and I'm going to use the URL you saw earlier.
All right, so we'll get the information
from the API and then we'll use promises
and receive a response from the server.
And then we'll take that response, convert it to JSON.
And again, we'll use the promise
if that works to process that data that we received,
and then all we need to do is modify the meaning
of the product's variable
and notice how I am using the this keyword here.
So this is why this wouldn't work
if you try to use an arrow method,
because the meaning of this
would refer to something inside this method
and so we have to use the functional notation.
You can see that the items are still loading up just fine.
And if you want to use your play around
with some of the different life cycle methods
that are available to you,
the one that I would probably use for fetch here
would be this one which is the created method,
but this would pretty much work
in just about any of the lifecycle methods.
So if I said before, create that would still work
or if I tried even before Mount, that would work as well.
But I think if I did before update, it would no longer work
because it's assuming that this event happens
when something about my data or the reactivity has updated.
So once you get to that point,
this is no longer going to work.
As I mentioned, the one that I would use here
would be created.
So this would have happened after the sort
of generic initialization of my application,
where all these different variables
will be ready for me to use
because it's initialized everything
and none of my interface has yet shown.
And so working with lifecycle methods
just really means understanding what is happening
and what things are available to you.
Sometimes some lifecycle methods
will be better for some tasks
and this is going to be experience that teaches you,
which is the right lifecycle hook
for which individual instance.