Vue.js Function called many times

Question

Run the code and look in the console in your browser. You will see function "formatName()" is called many times. Why? I dont update data of race. But if i change function "amIStarted()" to "return start < 5", then it will be executed 2 times, which is correct. (sorry my english)

https://jsfiddle.net/a496smx2/48/

var stopwatch = new Vue({
    el: "#stopwatch",
  data: {
    time: 1
  },
  created: function() {
    setInterval(function(){
        stopwatch.time++;
    }, 1000);
  }
})

var race = new Vue({
  el: "#race",
  data: {
        startList: [
        {name: "John", start: 3},
        {name: "Mike", start: 7},
        {name: "Gabe", start: 333},
    ],
  },
  methods: {
    amIStarted: function(start) {
        return start < stopwatch.time;
    },
    formatName: function(name) {
        console.log("I was called.")
        return 'Mr. '+name;
    }
  }
});

<div id="stopwatch" ><h4>Time: <span class="gold" >{{time}}</span></h4></div>

<small>Yellow color means the person started</small>

<div id="race" >
  <div v-for="oneStart in startList" :class="{gold : amIStarted(oneStart.start)}" >
    {{formatName(oneStart.name)}} will start when time is more then {{oneStart.start}}
  </div>
  <br><br>
</div>

Answer 1

You're looking for computed properties instead of methods. They will be optimized so they are run only when a prop it depends on changes. Methods are run every time an update happens, which could be as often as the mouse moves, depending on your application structure and complexity.

Answer 2

function "formatName()" is called many times. Why?

Because you have added a variable which is continuously changing and checked to add a class :class="{gold : amIStarted(oneStart.start)}" and in each chanve vue reload that part in which function comes and it is calling it again.

var stopwatch = new Vue({
    el: "#stopwatch",
  data: {
    time: 1
  },
  created: function() {
    setInterval(function(){
        stopwatch.time++;
    }, 1000);
  }
})

var race = new Vue({
  el: "#race",
  data: {
        startList: [
        {name: "John", start: 3},
        {name: "Mike", start: 7},
        {name: "Gabe", start: 333},
    ],
  },
  methods: {
    amIStarted: function(start) {
        return start < stopwatch.time;
    },
    formatName: function(name) {
        console.log("I was called.")
        return 'Mr. '+name;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="stopwatch" ><h4>Time: <span class="gold" >{{time}}</span></h4></div>

<small>Yellow color means the person started</small>

<div id="race" >
<div>
  <div v-for="oneStart in startList"  >
    {{formatName(oneStart.name)}} will start when time is more then {{oneStart.start}}
  </div>
  <br><br>
  </div>
</div>

Here is the flow

https://vuejs.org/images/data.png

There are many other ways to achieve what you want to do. Please check for those.