Vue.js Basics Part 5 | Watch Property
Tags: javascript, webdev, vue, programming
Published: 2022-09-05 19:45:02

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](https://dev.to/ahmetmeliksah/vuejs-basics-part-4-lifecycle-and-template-refs-4hlk) (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. 

```javascript
<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 `watch`property. 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'.

```javascript
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:
```javascript
<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](https://dev.to/ahmetmeliksah/vuejs-baiscs-part-1-5glm) | 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.