[Vuejs]-Incrementing and re-rendering in vue.js : bug or feature?

by

1👍

✅

You are executing the update function for every rendering of the component.

And because the rendering is depends on number every time the variable changes the component re-render and call update again.

The setInterval repeatedly calls a function or executes a code snippet.
setInterval

So effectively you are creating multiple timers that will increments number.

Also calling a function in the template is not a good practice what you can do is call the update method in the created lifecycle hook that will be called only once.

Created

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    number: 1
  },
  created() {
    this.update();
  },
  methods: {
      update() {
          setInterval(() => {
              this.number++
          }, 1000)
      }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <h1> Seconds : {{ number }}</h1>
</div>
👤Pierre Said

Leave a comment