添加新项目非常慢

Posted 2023-04-13

【中文标题】添加新项目非常慢

【英文标题】：Adding new items is extremely slow

【发布时间】：2021-11-14 05:02:02

【问题描述】：

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

<template>
    <Page>
        <ActionBar title="Home" />
        <WrapLayout orientation="horizontal" backgroundColor="lightgray"
         >
            <Button text="Add" @tap="click" />
            <Label v-for="item of items"   
            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 本身存在一些问题。

【参考方案1】：

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

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

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

【讨论】：

不，它和我的原始代码一样慢。澄清一下：我从操场上运行代码。