Introduction to Vue.js Lifecycle Hooks
This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Lifecycle Hooks" Lesson
>> Sarah Drasner: Lifecycle hooks, we've gotten pretty far, but we haven't talked about lifecycle hooks yet, and they are really, really important. And they become a little bit more important as we start to use something like a Vue CLI, where we're bringing components in as we need them, and not using them if we don't need them.
[00:00:16] So what are lifecycle hooks? They provide you a method so that you might trigger something precisely at different junctures of a components life cycle. Components are mounted and unmounted from the DOM. So for instance, when we toggled that v if statement in the beginning of this course we had it mounting and unmounting instead of the v shell where we're just toggling display none.
[00:00:43] So what we would have is beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, destroyed. Don't worry, I'm gonna go into these in more depth. So if we go into the console in this pen.
>> Sarah Drasner: We've got this child that we're showing and not showing. And if we go look at the console, we don't need animations.
[00:01:11] You can see beforeCreate, created, I'm gonna actually refresh so you can see it fresh. So we've got beforeCreate, created, beforeMount, mounted, beforeDestroy, destroyed. And that will just happen over and over again and those will occur in order. And all that's going on in this pen if we go and look at it is I'm hooking in to these.
[00:01:36] I'm saying beforeCreate and using a function here and console logging those occurrences. So if we're gonna dig a little bit further into what each one of those mean, we instantiate a new view instance. And then when we're either using the view instance itself, the view instance itself also has these hooks available to us.
[00:02:01] But we're mostly gonna be working with components in order to see these life cycle hooks. Because we're gonna mount and unmount, or asynchronously load components. So we've got beforeCreate, we're gonna observe the data and init events. In created we've got template options and render. In beforeMount we create virtual DOM eland replace el with it.
[00:02:25] And then it mounted, we have a couple of different things that happen it's mounted to the DOM. We're gonna update the components sometimes so when the components is updated, we have the beforeUpdate and updated. And then this, this activated and deactivated that only works for things like keep-alive.
[00:03:09] So lifecycle hooks also auto-bind to the instance, so you can see that component's state and methods. You don't have to console.log what this refers to. You can still use this dot text or this dot whatever is in your data inside those lifecycle hooks. And again for this reason you shouldn't use an arrow function for these.
[00:03:30] You can use arrow functions inside of them, but it won't bind correctly unless you write them as a function. A non-arrow function. So we're gonna dig into animations in the next unit, but we can do something like this.
>> Sarah Drasner: [SOUND] And the way that we did this was, because everything was happening on the entrance, we're gonna go into the transition component and do a lot of things with the transition component.
[00:04:21] But we actually didn't need the transition component for this, because we're basically doing everything on the entrance. So as soon as those components, each one of those was a different component. As soon as it's mounted then a bunch of things happen. We have audio playing, we have timeline that we are creating and hanging everything off of that mounted.
[00:04:43] So we can do a lot of different stuff, we can then use mounted and those hooks for a lot of different things. You saw before in the other demo where we had that created where were listening to scroll events for those components in order to load more beers and things into that beer API.
[00:05:04] Okay, so we went through view CLI, and now you guys are super proficient at creating your view apps. You even know how to build them for deployment. You did such a good job with those things, let's talk about NUXT, because I think NUXT is kind of special, it has like a special place in my heart.
[00:05:22] NUXT is really good for, yeah?
>> Speaker 2: Before we get into NUXT, there's a question around like the lifecycle stuff, and the computed properties. And the value of the computed properties, depending on like an attribute or prop and like.
>> Sarah Drasner: So what's the question?
>> Speaker 2: Just basically where in the computed value?
[00:05:49] Where in the lifecycle is it actually computed?
>> Sarah Drasner: Where in the lifecycle is it computed? So a computed property is, it's created when the component is mounted. It's just like a method where it's taking basically that logic and it's doing it like initially upon mounting it. So we're actually, when we're, if we go back here.
[00:06:13] We've got observe data an init event, that's going to happen before create. So that's when we are starting to work with all those methods and created. Computed values aren't instantiated any differently than a method. The only thing that's really different is that we're not updating it unless the dependencies changed.
[00:06:35] So it's created the same was as a method is, but that's only updating, and we're only reconfiguring it and redoing it at a different point in time. So if the data changes, but not on every update. Does that make sense?
>> Speaker 2: Yeah, and they're just saying if a property changes and the computed property is dependent on something else, I guess.
>> Sarah Drasner: Yes-
>> Speaker 2: So worried about grace conditions.
>> Sarah Drasner: [CROSSTALK] So the dependency computed property will re-run, but that doesn't have much to do with the lifecycle in any particular special way.
>> Speaker 2: All right.
>> Speaker 3: They were asking more about, when it's initialized exactly.
>> Sarah Drasner: That would be before create.
>> Speaker 2: Before create.
>> Speaker 3: Yeah.