new Vue({
el: '#app',
data: {
todos: [],
starttime: undefined,
runtime: 0
},
methods: {
caculateRuntime : function(last) {
if (last == 999 && this.starttime) {
this.runtime = (new Date() - this.starttime) + "ms";
this.starttime = null;
}
return '';
},
runtest: function() {
var data = [];
for (var i = 0; i < 1000; i++) {
data.push(i);
}
this.starttime = new Date();
this.todos = data;
}
}
})
<div id="app">
<h1>Performance Test</h1>
<h2>跑1000筆資料，Render畫面時間</h2>
<h3>vue.js效能測試</h3>
<input type='button' value='開始' v-on:click="runtest" /> 花費時間：{{runtime}}
<ul>
<li v-for="todo in todos">
{{ todo }}{{caculateRuntime($index)}}
</li>
</ul>
</div>