Skip to content

Instantly share code, notes, and snippets.

@yyx990803

yyx990803/App.vue

Created February 4, 2020 20:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yyx990803/6e9ee3dff878ad4202ce71ac6b9e51cf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yyx990803/6e9ee3dff878ad4202ce71ac6b9e51cf to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yyx990803 created this gist Feb 4, 2020.
    160 changes: 160 additions & 0 deletions App.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,160 @@
    <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>