Stop Vue from re-executing every method in your HTML code
Tags: vue
Published: 2022-07-05 17:55:43

Have you ever noticed that Vue re-executes any method you are using anywhere in your HTML code between the curly braces or with ```
v-bind
``` or ```
v-Html
``` or with any non-event bound method if something is changed on the screen? 

No? see the running example below.

It's true that Vue re-executes methods(non-bound) if anything on the screen changes, and that's why it's called a reactive framework, right. But suppose if you have hundred's of method and you change something on the screen and Vue starts executing these hundred's methods just imagine the performance of the app.

let's see this example :

```
<template>
  <div id="app">
    <Div>
      <span>Counter :{{ counter }}</span> <br />
      <button @click='counter++'>Increase</button> </t>
      <button @click='counter--'>Decrease</button>
    </Div>
    <p>{{ currentTime() }}</p>
  </div>
</template>

<script>
import VueExample from './components/HelloWorld.vue';

export default {
  data() {
		return {
			counter: 0,
		};
	},
  methods: {
    currentTime() {
      var date = new Date();
      console.log("in another method")
      return date;
    },
  },
};
</script>
```

In this example, there are two buttons that increases and decreases the counter upon clicking, and there is also a this code for displaying current time 

```{{ <p>{{ currentTime() }}</p>}}```

When you click on any of the button, it executes the `currentTime()`  method which we can verify by either looking at the console log or just by checking the current time at the UI . Though `counter` has nothing to do with the `currentTime()` method, but still it gets executed every time you increase or decrease the counter.

Why?

The reason is that `Vue` doesn't know whether the  `counter` attribute is part of  `currentTime()`  method or not, in other words, we can say `Vue` is not aware of whether `currentTime()` has any dependency on the `counter` attribute or not, so it executes it every time.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwpclxiqtcbo7oymcoop.gif)

[Check the running example here](https://stackblitz.com/edit/vue-ctljr4?file=src/App.vue)

So, how do we stop it?

Well, the solution to this issue is the "**Computed Property**."

A computed property is similar to other properties in Vue, but in a computed property, Vue is aware of its dependency, and it only executes it when any of it's dependencies changes.

So, lets fix the above code.

For this, we just need to move the `
currentTime()
` from method section to `computed` section

```<template>
  <div id="app">
    <Div>
      <span>Counter :{{ counter }}</span> <br />
      <button @click='counter++'>Increase</button> </t>
      <button @click='counter--'>Decrease</button>
    </Div>
    <p>{{ currentTime }}</p>
  </div>
</template>

<script>
import VueExample from './components/HelloWorld.vue';

export default {
  data() {
		return {
			counter: 0,
		};
	},
  computed:{
    currentTime() {
      var date = new Date();
      console.log("in another method")
      return date;
    },
  },
  methods: {
  },
};
</script>

```

There is another approach to solve this using `Watcher`,  which I "ll discuss in my upcoming articles.