Skip to content

Instantly share code, notes, and snippets.

@yyx990803
Created February 4, 2020 20:01
Show Gist options
  • Save yyx990803/6e9ee3dff878ad4202ce71ac6b9e51cf to your computer and use it in GitHub Desktop.
Save yyx990803/6e9ee3dff878ad4202ce71ac6b9e51cf to your computer and use it in GitHub Desktop.
<template>
<div class="jumbotron">
<div class="row">
<div class="col-md-6">
<h1>Vue.js 3.0.0-alpha4 (keyed)</h1>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="run" @click="run">Create 1,000 rows</button>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="runlots" @click="runLots">Create 10,000 rows</button>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="add" @click="add">Append 1,000 rows</button>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="update" @click="update">Update every 10th row</button>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="clear" @click="clear">Clear</button>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="swaprows" @click="swapRows">Swap Rows</button>
</div>
</div>
</div>
</div>
</div>
<table class="table table-hover table-striped test-data">
<tbody>
<tr
v-for="row in rows"
:key="row.id"
:class="{'danger': row.id == selected}">
<td class="col-md-1">{{row.id}}</td>
<td class="col-md-4">
<a @click="select(row.id)">{{row.label}}</a>
</td>
<td class="col-md-1">
<a @click="remove(row.id)">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
</td>
<td class="col-md-6"></td>
</tr>
</tbody>
</table>
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
</template>
<script>
import { markNonReactive } from 'vue'
let startTime;
let lastMeasure;
const startMeasure = function(name) {
startTime = performance.now();
lastMeasure = name;
};
const records = {}
const stopMeasure = function() {
const last = lastMeasure;
if (lastMeasure) {
window.setTimeout(function () {
lastMeasure = null;
const stop = performance.now();
if (!records[last]) {
records[last] = {
sum: 0,
count: 0
}
}
const record = records[last]
record.sum += stop-startTime
record.count++
console.log(last+" took "+(stop-startTime));
console.log(`average: ` + (record.sum / record.count) + `ms`)
}, 0);
}
};
function _random(max) {
return Math.round(Math.random()*1000)%max;
}
export default {
data: () => ({
rows: [],
selected: undefined,
id: 1,
}),
methods: {
setRows(rows = this.rows.slice()) {
this.rows = markNonReactive(rows)
},
buildData(count = 1000) {
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
const data = [];
for (let i = 0; i < count; i++)
data.push({id: this.id++, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] });
return data;
},
add() {
startMeasure("add");
this.setRows(this.rows.concat(this.buildData(1000)));
stopMeasure();
},
remove(id) {
startMeasure("remove");
this.setRows(this.rows.filter(d => d.id !== id))
stopMeasure();
},
select(id) {
startMeasure("select");
this.selected = id;
stopMeasure();
},
run() {
startMeasure("run");
this.setRows(this.buildData());
this.selected = undefined;
stopMeasure();
},
update() {
startMeasure("update");
for (let i = 0; i < this.rows.length; i += 10) {
this.rows[i].label += '!!!'
}
this.setRows()
stopMeasure();
},
runLots() {
startMeasure("runLots");
this.setRows(this.buildData(10000));
this.selected = undefined;
stopMeasure();
},
clear() {
startMeasure("clear");
this.setRows([]);
this.selected = undefined;
stopMeasure();
},
swapRows() {
startMeasure("swapRows");
if (this.rows.length > 998) {
const d1 = this.rows[1];
const d998 = this.rows[998];
this.rows[1] = d998;
this.rows[998] = d1;
}
this.setRows()
stopMeasure();
},
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment