nativescript - 添加新项目非常慢
问题描述
我正在探索 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 本身存在一些问题。
解决方案
可能是因为您在每次推送后都会导致重新渲染,这可能会很昂贵。如何创建这 30 个项目,将其保存在一个临时数组中,然后分散推送它?
methods: {
click(e) {
const newItems = [];
for (let i = 0; i < 30; i++) {
newItems.push({i});
}
this.items.push(...newItems);
}
}
推荐阅读
- mongodb - 通过映射id排除行并通过映射名称在mongodb中获取记录
- php - 如何查询 Laravel Eloquent 的 belongsTo 关系?
- typescript - VSCode 一直抱怨导入“fs”节点模块
- ionic-framework - 如何从页面本身中关闭在 Modal 中打开的页面组件?- 离子4
- python - 我如何注释所有峰值
- android - 为什么 Firebase FCM 通知甚至发送给消息的发件人
- php - 如何将自定义帖子分类名称仅放入数组?
- java - Spring Webflux 消费者是反应性的,但生产者不是(一些外部服务)
- c# - Azure Blob:图像优化
- java - 在我的android应用程序中设置retrofit2和okhttp3的progard规则后得到空响应