JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<div id="vue">
  counter:{{counter}}
</div>
<div id="rerenders">
</div>
<div id="frames">
</div>
<div id="waste">
</div>

JavaScript

var rerenders = 0
new Vue({
	el:'#vue',
  data:{
  	counter:0
  },
  created(){
  	setInterval(()=>{
    	this.counter++
    }, 5)
  },
  updated(){
    //keep this stuff outside of Vue to not trigger more updates
  	rerenders++
  	document.getElementById('rerenders').innerText = 'rerenders:' + rerenders
  }
})
var frames = 0
function frameCounter(){
	frames++
  document.getElementById('frames').innerText = 'frames:' + frames
  document.getElementById('waste').innerText = 'wastefulness:' + Math.round(rerenders / frames * 100 - 100) + '%'
  requestAnimationFrame(frameCounter)
}
frameCounter()