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>

tony19 · Accepted Answer · 2022-07-15 23:05:18Z

2

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.

edited Jul 15, 2022 at 23:05

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jul 20, 2018 at 12:10

Lazar Ljubenović

19.9k10 gold badges58 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niklesh Raut · Accepted Answer · 2018-07-20 12:30:30Z

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.

Daniel Beck · Accepted Answer · 2018-07-20 12:41:07Z

Functions or filters embedded in a template will be called every time the template is rendered, so every time you update the time, that function will be run (once per name) as part of the rerender.

So long as your methods have no unwanted side effects, this is generally fine! But in cases where you may have a lot of these going at once and start running into performance issues, you can switch to a computed function.

Computed functions will be called only when the data they depend on changes. You can't pass parameters to a computed function, so rather than handling each individual name separately you'd need to have it modify the full list of names in one go:

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
      }
    ]
  },
  computed: {
    formattedList() {
    console.log("Computed function ran");
      let arr = [];
      for (let oneStart of this.startList) {
        arr.push({
          formattedName: 'Mr. ' + oneStart.name,
          start: oneStart.start        
        })
      }
      return arr
    }
  },
  methods: {
    amIStarted: function(start) {
      return start < stopwatch.time;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.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 v-for="oneStart in formattedList" :class="{gold : amIStarted(oneStart.start)}">
    {{oneStart.formattedName}} will start when time is more then {{oneStart.start}}
  </div>
  <br><br>
</div>

An alternative approach would be to modify the data in a beforeMount() or created() block, but this would only be appropriate if you're certain the input data will not change during the lifespan of the component.

Collectives™ on Stack Overflow

Vue.js Function called many times

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related