Watchers

[00:00:00]
>> So watchers are good for asynchronous updates and updates and transitions with data changes. And part of the reason why I explained all that to you is so that you know how all of those things are tracked and rendered. So what's gonna happen is we're gonna watch any data property that we created.

[00:00:19]
So if we have this counter of 0, and we increase this, we're gonna watch this counter. So unlike in compute computed properties, where we have a different name for a different type of data and those have to be different. We're going to declare something that's the same. We're gonna say we're gonna watch this and console log every time it's changed.

[00:00:48]
So if I go into my console, if I increase this counter, every time I hit that button, the counter has changed, the counter has changed, the counter has changed. So basically what we're doing is we're hooking into that reactivity system that we just talked about. And we're saying, anytime something is changed, that we've that something that in that effect has been changed, please let us know something or please let us do something with that.

[00:01:15]
Or please let us, create a new function or something. So it gives us a little layer to start to intercept and interacts with that change in this property. We also have access to the new value and the old value. Remember how I talked about how that hover state, it's like the moment that you start hovering, the time then it's hovering in the end state of the hovering value.

[00:01:43]
This is kind of similar to that. We have a watched property. We have the access to the new value, of course. But we also have access to the old value. So if you wanna do things that, check between the differences of things, like let's say you wanted to animate the state between two things in a data visualization, which I'll show you in a little bit.

[00:02:04]
Then you can totally do that in here. So you could say, watch watched property, new value and old value, your dope code here. And we can also gain access to nested values. So let's say we have an object. And we actually wanna watch something inside of that object, we can say deep true.

[00:02:22]
And then we say nested watch property, new value, old value. And that's the same. So if we go back to this counter, we've got this counter where we're able to update. What we're console logging here is the new value, we passed in the new value and the old value this time.

[00:02:41]
And we say the counter has changed. It was old value it is now new value. So I opened this up, In here, and I say the counter is changed, it was 0, now it's 1. It was 1, now it's 2. It was 2, now it's 1. So this is the simplest example I can show you.

[00:03:02]
But it actually allows you to do lots of different pieces here. So let's say we wanted to make a virtualized scroller or something like every time we get to the bottom of the page, we wanna watch for the state of the bottom of the page. So that we can add more things from an API.

[00:03:23]
Let's go into the code pen for a moment. Let's open it actually in a whole new window. We are gathering beers from this API. And if we go here into our View tab. We see an array of a few objects that we've gotten. And we say bottom is false.

[00:03:48]
And then anytime the bottom is true, it's gonna add, it's gonna call out to the API and get more beers. It's just gonna call and get more, and more beers. And these are all beer appended to that array. So we've got that all from this punk beers API.

[00:04:03]
Because if you're gonna drink a lot of beer when you run out of beer, you need more beer. That's just obvious, right? So we've got this bottom is false right now. We've got this empty beers array. And what we're doing here is we're going to at first listen for we're gonna use a created lifecycle method, which I'll explain in a minute.

[00:04:25]
But basically, what it allows us to do is to say as soon as this component is created, start listening on this window event listener for scroll. And this dot bottom calls this top bottom visible. Remember when I said that you can call a method from a lifecycle hook or something else.

[00:04:46]
So we have access to this method called bottom visible. It's this stop bottom visible. And in here, we're evaluating the scroll height, right? We're returning whether or not we've hit the bottom of the page where we're gonna say, whether or not the bottom of the page is visible.

[00:05:04]
We also have this method called add beer, where we reach out to the punk API. We grab a bunch of things. And we, assign them to API info and we push that this dot beers dot push API info. So we've got this empty array, we're gonna add beers.

[00:05:23]
Anytime we add a beer, we're gonna push on to that array. And if this.bottomvisible calls this.addbeer, the same for the watch, we're passing in a new value. If this is true, if the new value is true of the bottom is visible, then we add a beer. So now we're able to add some punk beers as soon as we get to the bottom of the page.

[00:05:51]
So as we said, here, we're watching this bottom is false. We're seeing if it turns into something else, some other value. And here we've got the created that, starts to add the beers as soon as the component is mounted. We're checking if the bottom is visible. And then we add a beer.

[00:06:14]
And the add beer is calling out to axio. It's using axios to get more beers and push it on. Now and this is the HTML that it takes to do this. Of course, we're using a v-for beer and beers. I also have this v-if here. I'm gonna say if there's no length to the beers array show this loading thing.

[00:06:34]
But we're on a pretty fast connection. So it didn't have to show that. But that's a good thing to note for if you're waiting on an API, you might wanna show like a little loader and stuff. You probably don't wanna always implement this yourself. There's a great library called vue-virtual-scroller, and it helps if I spell it correctly.

[00:06:56]
And then it actually goes to the repo. So we it's by a guy named Jim who's actually on vue core team. He made a really great virtual scroller that has lazy parts of it. It's blazing fast. It's really wonderful. And he has this great demo here. So if you need to use a virtual scroller, I strongly suggest that.

[00:07:18]
I also mentioned that you could change data sets based on these watchers, right? I have the first dataset second dataset. And it doesn't matter if I started from the third and I go to the first it's still able to transition between those bars. SVG is really good for this because it's built with math.

[00:07:37]
I love SVG for this reason, I can build all sorts of things. And indeed, this graph is not using D3 to build the graph. I'm you just using view directives to create this graph. So if I look over here what I mean by that is I can make some computed properties as well, that have the max length of things and a max range of things so that I can make my axes.

[00:08:06]
And this probably looks like number garbage to you. [LAUGH] But really, it's using SVG to build all of these pieces. If you wanna learn more about how SVG works with the DOM. And how to build things with SVG, I have another course that's advanced SVG, on front end masters that you can learn some of these premises.

[00:08:27]
But if we look through this watch, what I'm doing is I'm looking at the selected, whatever is selected. And I have I create a dummy object that will get updated by GSAP, which is an animation library. I have an update function that is invoked on each tween step we'll use this to push the data.

[00:08:48]
We create an object to hold the source data to be tweaked and the function pointer for update events. We turn we go in this for loop we turn the current index into a string. And then we tween over, because that's what Green Talk will expect from us. And then we're tweening over our target dummy object.

[00:09:06]
But only for this specific key. So then we're able to kind of look between those values. And I have a couple more examples here. So again, we're watching that selected value. And we're able to go between them.