JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<div id="vue">
  <button ref="one" @click="counter++"></button>
  <button ref="two" @click="increment"></button>
  <button ref="three" @click="increment()"></button>
  <button @click="start">Start</button>
  Runs: <input v-model.number="limit">
  {{counter}}
  <hr>Inline: {{inline}} ms
  <hr>Method: {{method}} ms
  <hr>Method(): {{method2}} ms
</div>

JavaScript

new Vue({
  el: '#vue',
  data: {
    counter: 0,
    inline: undefined,
    method: undefined,
    method2:undefined,
    limit: 10000
  },
  methods: {
    increment() {
        this.counter++
      },
      start() {
        var one = this.$refs.one
        var two = this.$refs.two
        var three = this.$refs.three
        var start = new Date()
        var event = new Event('click')
        this.counter = 0
        for (var i = 0; i < this.limit; i++) {
          one.dispatchEvent(event)
        }
        this.inline = (new Date() - start) / this.limit
        this.counter = 0
        start = new Date()
        for (var i = 0; i < this.limit; i++) {
          two.dispatchEvent(event)
        }
        this.method = (new Date() - start) / this.limit
        this.counter = 0
        start = new Date()
        for (var i = 0; i < this.limit; i++) {
          three.dispatchEvent(event)
        }
        this.method2 = (new Date() - start) / this.limit
      }
  }
})