So far we’ve learned that data
is used to store known dynamic data and computed
is used to store dynamic data that is computed using other pieces of dynamic data. However, there is one caveat.
A computed
value will only recompute when a dynamic value used inside of its getter function changes. For example, in our previous examples languageLevel
would only be recomputed if hoursStudied
changed. But what do we do if we want to make app updates without explicitly using a value in a computed
function? We use the watch
property.
const app = new Vue({ el: '#app', data: { currentLanguage: 'Spanish', supportedLanguages: ['Spanish', 'Italian', 'Arabic'], hoursStudied: 274 }, watch: { currentLanguage: function (newCurrentLanguage, oldCurrentLanguage) { if (supportedLanguages.includes(newCurrentLanguage)) { this.hoursStudied = 0; } else { this.currentLanguage = oldCurrentLanguage; } } } });
In this example, we want to set the number of hours studied to 0
whenever the user changes languages to a new supported language. If the language is not supported, it reverts the language back to the previously-selected language.
This functionality is not a computed
value because we do not actually need to continually use this information to compute a new dynamic property: we just need to update existing properties whenever the change happens.
The value of watch
is an object containing all of the properties to watch. The keys of this object are the names of the properties to watch for changes and the values are functions to run whenever the corresponding properties change. These functions take two parameters: the new value of that property and the previous value of that property.
Note: It may seem like you could use watch
in many instances where you could use computed
. The Vue team encourages developers to use computed
in these situations as computed
values update more efficiently than watch
ed values.
Instructions
Let’s add a watcher to our app. As we go on to build more complex apps, watch
will become even more important. For this app, though, we are just going to do something a little fun. Whenever a user types "meet and greet"
or "meet-and-greet"
into the special requests field, we will automatically upgrade their tickets to VIP.
Add a watch
property to the options object. For now, make the value an empty object, {}
.
Now, let’s watch specialRequests
for changes.
Add a key to watch
called specialRequests
and make the value the following function:
function(newRequests, oldRequests) { if (newRequests.toLowerCase().includes('meet and greet') || newRequests.toLowerCase().includes('meet-and-greet')) { this.ticketType = 'vip'; } }
This function will check the updated special requests for mentions of “meet and greet” and change the ticket type to VIP if any exist.
We’ve temporarily tied the “Ticket Type” (ticketType
) and “Special Requests” (specialRequests
) fields on the site to the corresponding pieces of data
in your Vue app (don’t worry, you’ll learn how to do this in Vue Forms). Try writing “meet and greet” into the “Special Requests” field to see ticketType
automatically get updated.