Vue.js Basics Part 5 | Watch Property

Today, I will be talking about watch property in Vue.js.

This is part 5 of my Vue.js Basics series, to read part 4, please click here (spoiler! Part 4 is about template refs)

What are watchers? The answer is hidden in the question. Watchers watch any data or computed property and execute code based on value changes. Below, I made a small program that executes some code (alerts the user) at a certain value. First, I will explain the code below line by line, and then I will talk about where we can use watchers. Before details, I've written a counter that increments and decrements value.

<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    watch: {
      count(newCount) {
        if(newCount === 5) {
          alert("count is five!")
        }
      }
    }
  }
</script>

<template>
  <h1>Count : {{ count }}</h1>
  <button @click="count++">Increase</button>
  <button @click="count--">Decrease</button>
  <p v-if="count < 5"> Less than 5! </p>
  <p v-else-if="count > 5"> Greater than 5! </p>
  <p v-else="count === 5"> Count is 5! </p>
</template>

So, we've got count that's got an inital value of 0. All it does is keeping track of what number we're at. Below that we've got the watchproperty. Look carefully! count value that is in data object, is now a 'function' in watch object. Their names must match, otherwise watch property won't know what it's 'watching'.

watch: {
      count(newCount) {
        if(newCount === 5) {
          alert("count is five!")
        }
      }
    }

So, the code above 'watches' for count data's value to equal to (===) 5 to execute the code in the if block. watchers automatically receive new value as the argument. Thus, new value of count is the argument here. Once newCount hits 5, alert("count is five!") this code gets executed. It simply prompts an alert that says "count is five!".

Time for template part of our code:

<h1>Count : {{ count }}</h1>
  <button @click="count++">Increase</button>
  <button @click="count--">Decrease</button>
  <p v-if="count < 5"> Less than 5! </p>
  <p v-else-if="count > 5"> Greater than 5! </p>
  <p v-else="count === 5"> Count is 5! </p>

When buttons are clicked, they increment and decrement count respectively. Last three lines makes conditional rendering based on value of count. To know more about conditional rendering please go here | scroll down a bit to get to conditional rendering.

Okay? But why are we doing this?

• When you want to add class to a certain element or component on your Vue app when the value of something gets changed by the user, you can use watchers.
• When calling API response (fetching data e.g.) to change application data.
• When applying transitions

Watchers Vs. Computed

• Computed props are cached, so only when value changes, they're recalculated. By contrast, watchers are executed every time.

---

That's it for part 5, we talked about watch property, and difference between a computed property and a watch property in Vue.js.

Next, I will be going through components in Vue.