我有大约 4000 个对象通过 AJAX 返回。我用 v-for 遍历它们并将它们吐到一个表中。
初始加载和渲染速度非常快,但我还有一个用于“即时搜索”的输入字段。我使用一个计算属性来使用输入值和一个小数据集过滤数据集,比如最多约 100 个结果,这非常有效,但随着数据集变大,速度会变慢。
我正在渲染一个包含 4 个值的表格,其中一个是自定义组件。删除组件可以加快速度,但令我惊讶的是它对性能的影响如此之大。我不确定我是否遗漏了什么,或者是否有人可以指出我正确的方向?
我知道一页有大量数据,但我认为这是 Vue 应该擅长的。我用谷歌搜索了这个问题,例如我发现了这个 codepen呈现相似的项目列表并以完全相同的方式进行过滤,我可以复制粘贴数组中的项目数量一直到 10,000 左右,并且在搜索时没有明显的性能影响。
我已采取的加快速度的步骤,这些改进很小或没有改进:
- 在 v-for 上添加了一个具有唯一值的 v-bind:key
- 不使用表格元素,而是使用 div 或 ul
- 放弃 nativeJS .filter 方法,因为它可能很慢,并使用我自己的过滤器 方法。
- 尝试在只有依赖项的新代码库上运行它 需要运行。
- 我知道分页技术等,但我不愿意 除非我已经用尽所有其他可能性,否则请这样做。
谢谢
它要我在这里粘贴代码,即使我已经链接到 codepen 所以这里是没有 items 数组的 JS。
Vue.component('my-component', {
template: '#generic-picker',
props:['items','query','selected'],
created: function(){
this.query='';
this.selected='';
},
computed:{
filteredItems: function () {
var query = this.query;
return this.items.filter(function (item) {
return item.toLowerCase().indexOf(query.toLowerCase()) !== -1})
}
},
methods:{
select:function(selection){
this.selected = selection;
}
}
})
// create a root instance
var genericpicker = new Vue({
el: '#example'
});
最佳答案
使用计算数组的问题在于,当您处于 v-show
是更好的选择。
相反,为每个项目保留一个指示符,以确定它是否应该显示,并基于此使用 v-show
。下面的代码片段实现了两者,可通过复选框选择。您会发现,当不使用 v-show
版本时,过滤器更新有点停止,但在使用 v-show
时保持得很好。
当您将其过滤到 0 行(例如,过滤 x)然后显示所有内容(删除过滤器)时最明显,但您可以看到部分过滤的差异,如 me 2
let arr = [];
for (let i=0; i<6000; ++i) {
arr.push({name: `Name ${i}`, thingy: `Thingy ${i}`});
}
Vue.component('tableRow', {
template: '<tr><td>{{name}}</td><td>{{thingy}}</td></tr>',
props: ['name', 'thingy']
}
);
new Vue({
el: '#app',
data: {
arr,
filter: 'x',
useVshow: false
},
computed: {
filteredArr() {
return this.filter ? this.arr.filter((item) => item.name.indexOf(this.filter) > -1) : this.arr;
}
},
watch: {
filter() {
for (const i of this.arr) {
i.show = this.filter ? i.name.indexOf(this.filter) > -1 : true;
}
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
Filter: <input v-model="filter">
Use v-show: <input type="checkbox" v-model="useVshow">
<table>
<tr>
<th>Name</th>
<th>Thingy</th>
</tr>
<template v-if="useVshow">
<tr is="tableRow" v-for="row in arr" v-show="row.show" :key="row.name" :name="row.name" :thingy="row.thingy"></tr>
</template>
<template v-else>
<tr is="tableRow" v-for="row in filteredArr" v-show="row.show" :key="row.name" :name="row.name" :thingy="row.thingy"></tr>
</template>
</table>
</div>
关于javascript - Vue v-for 性能差,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43913454/