How to Use Vue.js watchers for Async Updates?

Shiv Kumar Ganesh
Jul 20, 2017 · 2 min read

Vue.js Watchers

As we know computed properties are handy but there are multiple use-cases where you will require a watcher to be present while there is a change in the property value. A watcher is helpful in binding data and detecting changes and reacting to them whenever it’s required. It helps you to react to the changes in the Data. Most of the Async functionalities are being handled by watchers in Vue.js. You can have a look at the previous tutorial in order to understand how the computed properties work. Let’s get started with seeing a simple example which will enable you to run a live clock on the screen. We will make a color changing watch using the hex code generator. The code goes as below

<div id=”app”> {{date}} </div>

In the code above we are changing the date every one second and computing time and then the time updates the date property, on the other hand whenever this Async Change takes place we go ahead and update the background color of the app. The code for generating colors is out of the scope of this Article and is covered in the JavaScript How To’s. You can have a look at it. But the entire point of this article is to show how the watcher to a particular property has the same name as the property and it gets updates as there is a change in the Property. This trigger can be used in various places but we are using it in changing the color of the app itself. The sample GIF is shown below. You can alternatively have a look at the JSFiddle code as well.

Vue.js watchers for Async Updates


With this, we can conclude that the watchers are pretty necessary in order to make an application react to various Async Events. The above example sets the base for the way in which we can use watchers in order to react to the Async calls. What do you think can be the other utilities of Watchers. Can you think of some events where watchers come handy?

Originally published at The Web Juice.

Shiv Kumar Ganesh

Written by

Interested in friends and am a Web Developer. Design Websites and Web Solutions in major Platforms, SEO Consultant

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade