添加新项目非常慢

Question

我正在探索 Nativescript。也许我不明白，但在我的 Android 上用这个简单的代码添加新项目需要超过 1 秒！带有 div 的相同代码可以在任何 Web 浏览器中立即执行。我做错了吗？

<template>
    <Page>
        <ActionBar title="Home" />
        <WrapLayout orientation="horizontal" backgroundColor="lightgray"
        width="100%" height="100%">
            <Button text="Add" @tap="click" />
            <Label v-for="item of items"  width="20" height="20"
            backgroundColor="red" marginLeft="5" marginTop="5" />
        </WrapLayout>
    </Page>
</template>

<script>
    export default {
        data() {
            return {
                items: []
            };
        },
        mounted() {
            
        },
        methods: {
            click(e) 
            {
                for (let i = 0; i < 30; i++) {
                    this.items.push({i}); 
                }
            }
        }
    };
</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }
</style>

编辑 好的，我正在从操场上运行代码。现在我在本地安装了nativescript，代码执行速度快了好几倍。但仍远未达到即刻。另外，我尝试添加以编程方式创建的没有 vuejs 的项目，以确保 vuejs 不是罪魁祸首。确实，nativescript 本身存在一些问题。

Answer 1

可能是因为您在每次推送后都会导致重新渲染，这可能会很昂贵。如何创建这 30 个项目，将其保存在一个临时数组中，然后分散推送它？

methods: {
    click(e)  {
        const newItems = [];
        for (let i = 0; i < 30; i++) {
            newItems.push({i}); 
        }

        this.items.push(...newItems);
    }
}