Check out a free preview of the full Introduction to Vue.js course:
The "Watchers" Lesson is part of the full, Introduction to Vue.js course featured in this preview video. Here's what you'd learn in this lesson:

Sarah notes that each component has a watcher instance. The properties touched by the watcher during the render are registered as dependencies. When the setter is triggered, it lets the watcher know and causes the component to re-render. After describing how watchers work, Sarah shows examples of how watchers can be used.

Get Unlimited Access Now

Transcript from the "Watchers" Lesson

[00:00:00]
>> Sarah Drasner: When we're talking about watchers, and how those play a part in all of this, each component has a watcher instance. So if we have the view instance, we're soon gonna be making components that are an extension of that view instance. So there are all these different components that we'll be using to build out our application.

[00:00:17] Each one of our components has a watcher instance. The properties touched by the watcher during render are registered as dependencies. And when the setter's triggered, it lets the watcher know and causes the component to re-render. This is important, because we're using a virtual DOM, and actually let me go back to this.

[00:00:38] We're using a virtual DOM. So calculations in JavaScript are relatively cheap, but to reach into the DOM is actually pretty expensive. So we're gonna do as much calculation in our virtual DOM before we actually bring it over to the DOM itself. So that we're doing all of, it keeps it really really fast and performing, do a lot of logic.

[00:01:00] You saw how fast those computed values allowed us to update things. All right, so if we're gonna look at this Vue instance in a little bit more depth. If I have something like this is the initial message, and this is another message, I'm going to console log the VM.

[00:01:19] Which is I could call this anything, but it's short for Vue model. View works off of a view model premises, it's not the same as view model programming that you might be used to. So I could say, vm.thing, I am a new thing, cuz we've got all of these data and we've got these messages, and other messages I can save that outside.

[00:01:42] But what ends up happening if I go over to this other window. First of all, we saw in Vue that we could look in the DevTools, that we could look at all of these things that we have here. We don't see that thing. We don't see that thing available to us.

[00:02:00] We only have message and other message. Now if we go in the Console, we get this view.$3, so we can go over here. We see message, other message, and we do see thing, but we don't see it in Vue. And the reason for that is we added it later, so it didn't setup all of the reactivity that we need.

[00:02:20] It doesn't setup-
>> Speaker 2: It's just a regular property at that time.
>> Sarah Drasner: It's just a regular property. It doesn't have any of the reactivity that we want. And you can even check that by looking below. We've got getters and setters for message, and we've got getters and setters for other message, but we don't have them for the other property that we just added.

[00:02:39] Because we didn't declare it initially, and we can check it, even in other way and say something like input v-model equals thing. And actually, let's start off with message, so you can see it in action first. So message and I should do type equals text. So if I run that, you can see that that's filled with this is the initial message, and it's the same thing as above.

[00:03:12] And I can change this and it will update to whatever value, you saw this earlier. But if I now change this to thing that we had declared outside. If I set up that v-model, I can run it again. And you'll see that there's no relationship between the v-model and the message that's getting outputted.

[00:03:36]
>> Sarah Drasner: So the Vue instance is the middleman between the DOM and the business logic, it's managing that stuff. And you might have heard people say things like React is just JavaScript. Vue is just JavaScript too. It's not more complicated than, I mean, there is some stuff that we're doing, same with React to manage that state and to create a virtual DOM.

[00:03:57] But this is all done without a lot of magic using getters and setters. So watch updates the DOM only if it is required. It performs calculations in JavaScript. So JavaScript again, is really performant at creating those calculations but not very performant at accessing the DOM. So we have a virtual DOM, which is like a copy but parsed in JavaScript, that way we can run all of those calculations and only touch the DOM when we're done making those calculations.

[00:04:29] So it will only update the DOM for the things that needs to be change, which is faster. So talking about WATCHERS in particular, WATCHERS are really good for asynchronous updates. They're good for things like updates and transitions with data changes because remember, we said that the watchers were looking at that component.

[00:04:48] They're actually the ones that are observing all of those things, they're observing those data streams. So if you need to plug into that functionality, you can, which is kind of awesome. So we're going to watch any data property declared on the Vue instance. In this really, really, super-simple example, we've got a counter that's 0 and then we've got a watch, which is declared just like our methods, just like our computed.

[00:05:13] And we've got this counter. And inside the counter, we've got this console log. So let's go look at this. We've got our console open in CodePen. And every time I update that, that's going to fire because that's watching that particular property and executing logic anytime that property changes.

[00:05:31]
>> Speaker 2: So is the name of your watcher significant then? That's how you tell it which property to watch?
>> Sarah Drasner: Yeah, this has to be the same as this. So counter has to be counter. Unlike the computed value where we're trying to make it different, so that we can access it differently this has to be the same.

[00:05:49] Great question. Okay, so if we have something like punk beers. [LAUGH] We can use Vue's watchers and Axios together to add more info on an infinite scroll. So this actually, this API has rate limiting, so it's probably not the best for this demo. But basically, there's a bunch of beers and they're not really on the page until I use them.

[00:06:16] So if I actually go into the Vue DevTools, at first we have an array that has three and then as I'm scrolling it has four, five, six, seven, you can see the array's updating. I'm getting more of these things and I'm making that request for more information as I'm hitting the bottom of the page.

[00:06:35] So what we have here is we're watching this thing we just called bottom is false. So we're seeing if that property is going to change. And basically, we're gonna add a beer every time that bottom is false. It's good to add beers when you get to the bottom of your barrel, right?

[00:06:54] [LAUGH] We're plugging into created here. We could also say mounted. That's a life cycle hook, which we have yet to talk about, but we will get there.
>> Speaker 2: Is this like the opposite of 99 bottles of beer on the wall?
>> Sarah Drasner: Yeah, exactly, exactly. As soon as we need more beer we need to fetch more beer, and they're all like punk beers I guess.

[00:07:12] That's cool. So we're listening to a scroll event. And in our methods we have this bottom visible, which basically does a calculation to see if we're near the bottom of the page, and we used Axios before. You can see why I like Axios, it's so simple to use.

[00:07:29] We're getting things like the name. We're using the name, the description, tag lines, some food pairings, some tips like all sorts of stuff. So we can add those as we need them, and we've got like beer.image, beer and beers. These stuff should actually start to look pretty familiar to you.

[00:07:52] We also have this little loading state here, which is like if beers.length is 0 and we haven't gotten anything from the server yet, just say loading and you can put whatever you want in there. So it's pretty nice, because we can update things on the fly, and we can have these asynchronous updates that we're watching.

[00:08:14] We're just basically hooking into the reactivity system that already exists. We're allowing to get deeper functionality by grabbing that. So when watching the property, you trigger a method on change. So that bottom has to be one of the properties, it has to be one of the properties if it's a watch, so that some just review.

[00:08:38] We have the created, we have our methods and we have this.adBeer. And we're basically grabbing all of these information from this Punk API that you can totally use also, it's really fun to plug into. So we have access to the new value and the old value if we want it, that's great.

[00:08:57] Remember, I said that with those asynchronous data streams in a reactivity system, we have access to like a couple different hooks. We've got the value and we've got the old value. So that's pretty cool, because that means that we can do things like transition between them with any kind of libraries we want, or we can do it ourselves with requestAnimationFrame.

[00:09:17] So we've got the watch property, value, and old value. We can also gain access to nested values. That's pretty common actually, because we don't usually just have bottom. We have things that are more complicated, like objects and stuff. So we have the watch property, deep is true and then we have nested watch property value and old values.

[00:09:38] So we can also do that. So we can transition state with Watchers. So here I've got a chart that I didn't use a charting library for, because I know how to work with SVG. And if you know SVG and you know Vue directives, you actually don't need to load something like D3.

[00:09:55] You can just spin up axes and use SVG values. SVG's built with math, so SVG and Watchers make a pretty cool pairing, because you can make data visualizations that are updating on the fly. So we're transitioning state with Watchers here. We've got select v-model, so you're like super pros at v-model now.

[00:10:17] You're super pro at V4s with option and options, and then in here we've got that selected value. That's an array of numbers, and we've got our first data set, second data set, things like that. I'm not gonna dig too far into the code here, but what is important is that I do pass in the new value and the old value.

[00:10:40] And I'm watching selected. Selected was that property that we had already designated here. So I'm watching selected, and I can use a library like GreenSock or I could write it with request animation frame however I want. I like GreenSock, so I use it a lot. And I'm tweening back and forth between one dataset and another dataset.

[00:11:03] Yeah, SVG's built with math, like I mentioned. So I can make these bars. And I can make those computed properties that are cached, unless their dependencies are changed. And I've got my axis. That's all it takes to make an axis that's super flexible with SVG and Vue directives.

[00:11:20] I don't need to load this giant library in order to do it, so that's really fun. And we're not gonna do an exercise for this section, because Watchers have more of a limited use. And you are basically like getting pretty good at those methods. And Watchers, we're gonna talk about components next, because I think components are probably like the most important thing that we need to cover that we haven't covered yet.