oxe/dev/web/performance/vue.html

A mighty tiny web components framework/library

<base href="/">
<script>document.querySelector('base').href = location.hostname === 'vokeio.github.io' ? '/oxe/performance/' : '/web/performance/';</script>
<link rel="stylesheet" href="./index.css">

<div id="scope">
    <div class="wrap">
        <div class="loader">Loader</div>
    </div>

    <h3>{{a()}} bound elements</h3>
    <h3>{{count}} bound elements</h3>
    <input v-model="count" type="number">
    <br>

    <button v-on:click="push">push</button>
    <button v-on:click="overwrite">overwrite</button>
    <button v-on:click="raw">raw</button>
    <button v-on:click="clear">clear</button>

    <div id="raw"></div>

    <div id="push">
        <div class="box" v-for="item in items">{{item.number}}</div>
    </div>

</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
        data() {
            return {
                // text: undefined,
                selected: '',

                text: 'text',
                items: [],
                message: '',
                count: 100000,
                one: { two: 'three' },
            }
        },
        methods: {
            a(){
               return Promise.resolve('a')
            },
            raw() {
                console.time('raw');
                const template = document.createElement('template');
                let html = '';
                for (var i = 0; i < this.count; i++) {
                    html += `
                    <div class="box">
                        <div>${i}</div>
                        <input value="${i}">
                    </div>
                `;
                }
                template.innerHTML = html;
                const raw = document.getElementById('raw');
                raw.appendChild(template.content);
                console.timeEnd('raw');
            },
            push() {
                console.time('push');
                for (var i = 0; i < this.count; i++) {
                    this.items.push({ number: i });
                    // this.items.push({ name: i, numbers: [ i ] });
                }
                console.timeEnd('push');
            },
            overwrite() {
                console.time('overwrite');

                // var users = [];
                // for (var i = 0; i < 200; i++) {
                //     users.push({ number: i, id: `${i}`, name: `${i}` });
                // }

                // var items = [];
                // for (var i = 0; i < this.count; i++) {
                //     items.push({ users });
                // }

                var items = [];
                for (var i = 0; i < this.count; i++) {
                    items.push({ number: i });
                    // items.push({ name: i, numbers: [ i ] });
                }
                this.items = items;
                console.timeEnd('overwrite');
                window.model = this;
            },
            clear() {
                this.items = [];
            },
        }

    }).mount('#scope')
</script>