Vue render performance

by Hajime Yamasaki Vukelic

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.runtime.min.js"></script>
<div id="root">

</div>

JavaScript

window.process = {}

let i = 0
const t = []

const lap = label => {
  const start = new Date().getTime()
  return () => {
    console.log(label, 'took', new Date().getTime() - start, 'ms')
  }
}


const endAll = lap('all')
const endData = lap('data')
while (i < 10000) {
	t.push({created: new Date().getTime(), done: false, editing: Math.random() < 0.5, text: 'Task' + i})
  i += 1
}
endData()

const endUI = lap('render')
const Ui = new Vue({
  el: '#root',
	render: h => {
  	return h('div', (() => {
      let items = []
      const l = t.length
      for (let i = 0; i < l; i += 1) {
      	const task = t[i]
        items.push(
          h('div', {class: 'task'}, [
            h('button', task.done ? 'Remove' : 'Finish'),
            task.editing
            ? h('span', task.text)
            : h('span', [
              h('input', {props: {value: task.text}}),
              h('button', 'Save')
            ])
          ])
  			)
      }
      return items
    })())
  },
})
endUI()
endAll()