With the View Options API, you're able to use the Watch option to keep an eye on reactive data, and then execute a function whenever that data changes. This is a really powerful feature of View. As such, it's probably no surprise that we can do the same thing with the Composition API. To do so, we import the Watch utility function.
Then, inside Setup, we call it. The first argument it takes is the reactive reference that we'd like to watch. The second argument is the function we'd like to call whenever the data changes. It receives the new value and the old value, just like watch does with the options API.
Lastly, let's remove the options API watch, as the two are doing the exact same thing now. Nice. It console logs exactly the same thing as before. we could also provide a third argument here to specify the same options that the options API watchers take.
For instance, we could provide the immediate option. This means that the watcher won't wait until the data changes the first time to run. Instead, it will fire immediately upon initialization, and then also every time the data changes, as before. Watch also supports the deep option.
just like with the options API. This allows us to watch deeply nested data in an object, but our data is just a string, so that doesn't apply here. All right, so watching our restaurant name for changes isn't very practical, so let's stir things up a bit. First, I'll remove the watcher on the restaurant name.
Next, let's give our customers some more options besides just the humble hamburger. I'll do this by creating a meals variable and assigning it a reactive array. We can also offer, mmm, let's say a cheeseburger, and maybe an impossible burger for all those veggie lovers out there. Also, what's a burger without fries?
Alright, let's return the meals from the setup function, and then loop over each meal in the template and display a yummy meal component for each. Let's check it out in the browser. Nice, now we're talking. Now, let's update our addItemToCart method to actually put items into a cart.
First, we'll need a variable to store the contents of the cart. I'll use reactive, since arrays aren't a primitive type. Then, we can update the addItemToCart method to push items into the cart. Now, let's watch our cart for changes.
And... For now, just console log the new and old values. If we try this out in the browser now, when we add a hamburger to the cart, you'll see we have two proxies logged in the console. But both our new cart value and our old cart value contain a hamburger.
That's not right. The new cart should contain the hamburger, but the old cart should be empty. What's going on here? Well, according to the official V3 documentation, using a watcher to compare values of a reactive array or object requires that a copy be made of just the values.
That's because watching a reactive object or array will always return a reference to the current value of that object for both the current and previous value of the state. Okay, so that means we need to make a copy of the cart. We can do that. by passing an anonymous function to watch and spreading the cart into a new array.
Now when we take a look, yeah, that looks more like we were expecting. The moral of the story here is that if you're watching a reactive array or object, you should always copy it as we've done here. This applies, though, not just to arrays and objects made reactive via the reactive function, but also applies when the ref function is used. To demonstrate, I'll change the cart definition to useRef.
value. And then let's modify our watcher. As you can see, the same thing happens as before. We've got a new and old cart that look exactly the same.
value. Okay, let's go ahead and take that back to using the reactive function. There are some other cool things we can do with watchers that the Composition API provides that the Options API doesn't. For instance, we can actually watch multiple items at one time.
This is possible by passing an array of items that we want to watch as the first argument. Now, the new value holds the new value of both the name and the cart in an array ordered in the same way that we passed them in to be watched. old value works the same way. We can also remove watchers with the Composition API.
To do this, we can capture a function that is returned by the watch function. I'll store that in a variable called removeWatcher, and then expose it to the template so that we can turn off the watcher at the click of a button. Now, when we change either the name or cart, we get logs in the console. However, after we click removeWatcher, the console logs stop.
Hmm, this could be very handy. Let's make things a little more useful. We can show the user the contents of their cart whenever they add a new item to it. This also means watching the name is no longer necessary.
Also, while we're at it, let's give the remove watcher button a more user-friendly label. Cool. Every time we add an item to our cart, we get the alert. showing us what all we've added.
And if the user gets tired of seeing their cart every time they add a new item, they can click the Hide Cart Alerts button. And poof, that alert is history. To recap, watching data and triggering side effects on that data's change with the Composition API works much like watching data with the Options API. Plus, we get some extra options with the Composition API.
like the ability to watch multiple variables at once, and the ability to remove a watcher altogether. Finally, the biggest caveat of using watch is when it comes to watching reactive arrays or objects, so be sure to copy those. That way you don't get any unintended consequences.