Every view component goes through various stages throughout its lifespan. It goes through certain stages when it's first created, it goes through certain stages when you update some data and it has to re-render, and it goes through some stages when you remove it from the page. In order to react and do things at any point during this lifecycle, view provides what's known as a collection of lifecycle hooks. These lifecycle hooks all live under the on prefix and can be imported from Vue.
So you have on before mount, on before unmounted, several others here. But the most popular that I use most is on mounted and on unmounted. Let's take a quick look at some examples of using both of those. So I'm going to choose on unmounted here and also on mounted.
When a component is mounted to the DOM, that means the markup, the stuff actually exists on the page. So if you ever want access to one of the DOM elements, you need to wait for on mounted in order to access it. Let's try to access the div with the class of plans just directly inside of script setup. plans.
And let's just console log the result of that. Open up my console here, and you'll see that the value is null, even though it certainly exists on the page. The problem is, is that the component has not mounted yet when the code and script setup runs. Therefore, it doesn't actually exist on the page.
So let's use on mounted and run the same thing again. This time we have that that div Now most of the time in view you don't want to use document query selector instead you want to use a feature called template refs a template ref is just a Reactive ref that's attached to a DOM element so we can say the plans wrapper is a ref Initially it is undefined Okay, we will connect it to the div here below with the ref keyword this is a special thing in view and Now whenever the component mounts plans wrapper will be this div element here. So this time I'll console log plans wrapper and we'll do dot value since this is a reactive ref and When I check the console this time, you can see we get the exact same thing So if you ever need access to a DOM element, the combination of a template ref and on mounted is the way to go. Now, what about on unmounted?
Let's remove the stuff for our mounted example and let's try out on unmounted. This function is called whenever the component is removed from the DOM. log, bye bye plan picker. view where we're using the plan picker component I'm just going to provide an input here.
It will be a checkbox and We'll wrap that in a label and it'll say something like show plan picker Great. Now I need to bind the input here To some data so that we can show and hide the plan picker based on that data. So I'll say show Define that data above By default, it will be true, and we need to import ref from view. Great.
So now, whenever we toggle the value of show, we will show and hide the plan picker. So right now show plan picker is checked. If I check the console, you'll see that we don't have any console logs. But as soon as I toggle show plan picker, we do get this buy by plan picker message in the console.
That's because on unmounted fired when plan picker was removed from the DOM. So what is unmounted good for? Well, it's most used for cleaning up any side effects that are created by your component. Let me give you an example of that.
Let's say that we had some count in here. value++ every 1000 milliseconds or one second now inside of the page down here. Let me display the count on my page. Now you can see we do have a timer ticking away there.
Let me zoom in just a little bit so you can see it better. Yeah, nine, 10, 11, 12, 13. Great. The problem now though is that this timer will continue ticking, that interval will continue going even if we hide the plan picker.
Now it's not rendered in the DOM anymore. but it's actually still running in the background. login here just to prove it to you. Refresh the page, open up my console, and yeah.
So here we have hello, six, seven, eight. That's fine because we're actually showing the plan breaker component, but when I hide it, you can see we get hello still ticking away. So this is bad. This can cause memory leaks.
and basically crash your applications if this happens too often. So the solution is to capture the return of the interval here and then on unmounted we can clear the interval. So this time I refresh the page, inspect, in the console we do get our hello message every one second but when I remove the plan picker from the page it's gone for good. the interval is no longer in effect.
Besides the lifecycle hooks that we've used in this lesson, there are many other lifecycle hooks available. They're just not as useful as the ones we covered, at least in my experience. But definitely check out the links in the description below to read up more on the other lifecycle hooks. Every view component goes through various stages throughout its lifespan.
It goes through certain stages when it's first created, it goes through certain stages when you update some data and it has to re-render, and it goes through some stages when you remove it from the page. In order to react and do things at any point during this lifecycle, view provides what's known as a collection of lifecycle hooks. These lifecycle hooks all live under the on prefix and can be imported from Vue. So you have on before mount, on before unmounted, several others here.
But the most popular that I use most is on mounted and on unmounted. Let's take a quick look at some examples of using both of those. So I'm going to choose on unmounted here and also on mounted. When a component is mounted to the DOM, that means the markup, the stuff actually exists on the page.
So if you ever want access to one of the DOM elements, you need to wait for on mounted in order to access it. Let's try to access the div with the class of plans just directly inside of script setup. plans. And let's just console log the result of that.
Open up my console here, and you'll see that the value is null, even though it certainly exists on the page. The problem is, is that the component has not mounted yet when the code and script setup runs. Therefore, it doesn't actually exist on the page. So let's use on mounted and run the same thing again.
This time we have that that div Now most of the time in view you don't want to use document query selector instead you want to use a feature called template refs a template ref is just a Reactive ref that's attached to a DOM element so we can say the plans wrapper is a ref Initially it is undefined Okay, we will connect it to the div here below with the ref keyword this is a special thing in view and Now whenever the component mounts plans wrapper will be this div element here. So this time I'll console log plans wrapper and we'll do dot value since this is a reactive ref and When I check the console this time, you can see we get the exact same thing So if you ever need access to a DOM element, the combination of a template ref and on mounted is the way to go. Now, what about on unmounted? Let's remove the stuff for our mounted example and let's try out on unmounted.
This function is called whenever the component is removed from the DOM. log, bye bye plan picker. view where we're using the plan picker component I'm just going to provide an input here. It will be a checkbox and We'll wrap that in a label and it'll say something like show plan picker Great.
Now I need to bind the input here To some data so that we can show and hide the plan picker based on that data. So I'll say show Define that data above By default, it will be true, and we need to import ref from view. Great. So now, whenever we toggle the value of show, we will show and hide the plan picker.
So right now show plan picker is checked. If I check the console, you'll see that we don't have any console logs. But as soon as I toggle show plan picker, we do get this buy by plan picker message in the console. That's because on unmounted fired when plan picker was removed from the DOM.
So what is unmounted good for? Well, it's most used for cleaning up any side effects that are created by your component. Let me give you an example of that. Let's say that we had some count in here.
value++ every 1000 milliseconds or one second now inside of the page down here. Let me display the count on my page. Now you can see we do have a timer ticking away there. Let me zoom in just a little bit so you can see it better.
Yeah, nine, 10, 11, 12, 13. Great. The problem now though is that this timer will continue ticking, that interval will continue going even if we hide the plan picker. Now it's not rendered in the DOM anymore.
but it's actually still running in the background. login here just to prove it to you. Refresh the page, open up my console, and yeah. So here we have hello, six, seven, eight.
That's fine because we're actually showing the plan breaker component, but when I hide it, you can see we get hello still ticking away. So this is bad. This can cause memory leaks. and basically crash your applications if this happens too often.
So the solution is to capture the return of the interval here and then on unmounted we can clear the interval. So this time I refresh the page, inspect, in the console we do get our hello message every one second but when I remove the plan picker from the page it's gone for good. the interval is no longer in effect. Besides the lifecycle hooks that we've used in this lesson, there are many other lifecycle hooks available.
They're just not as useful as the ones we covered, at least in my experience. But definitely check out the links in the description below to read up more on the other lifecycle hooks.