缓慢渲染 VueJS 页面，包含 2000-3000 个项目

Question

我有一个管理员视图，可以显示用户列表。完整列表大约有 3000 个条目。默认情况下，我将分页启用为 100 个用户/页，但管理员可以选择一次显示所有用户。 当显示 100 个用户时，一切都很好，但是当显示所有 3k 时，页面变得迟缓（例如，如果我尝试对列进行排序，则需要 3-4 秒才能对它们进行排序）并且我知道我能做的不多做关于响应时间。我正在使用lodash OrderBy 方法进行排序。

我的问题是，有没有办法让VueJS异步渲染列表，所以如果我点击按名称排序，然后立即按级别排序，它将取消现有的排序操作并开始一个新的？

这是一个示例代码（它显然不起作用，我只是为了说明我的观点而编造它）：

<template>
    <div class="container">
        <div class="row">
            <div class="col-3" @click="setSort('name')">
                Name
            </div>
            <div class="col-3" @click="setSort('level')">
                Level
            </div>
        </div>
        <div class="row" v-for="u in sortedUsers">
            <div class="col-3">
                {{u.name}}
            </div>
            <div class="col-3">
                {{u.level}}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: () => ({
            users: []
            ,orderCol:'name'
            ,orderDir:'asc'
        })
        ,computed : {
            sortedUsers () {
                return _.orderBy(this.users,this.orderCol,this.orderDir);
            }
        }
        ,methods : {
            setSort(col){
                this.orderCol = col;
                this.orderDir = (this.orderDir=='asc') ? 'desc' : 'asc';
            }
        }
        ,mounted () {
            this.$post('/getusers')
            .then((data) => {//assume data is in this format:
                // [{'name':'test1', 'level':'admin'}, {'name':'test2','level':'user'}, and so on]
                this.users = data; 
            });
        }
    };
</script>

Answer 1

答案是否定的。无法异步渲染所有 3000 个项目。 订购很快，渲染很慢。即使您可以通过 laravel 或任何其他应用程序加快订购速度，它也不会帮助您更快地渲染。据我所知，您无法通过异步加速渲染。

一些链接：

https://github.com/vuejs/vue/issues/441

• 尝试使用短列表，例如 100 个项目 + 分页（本地，仅偏移 v-for）。

• vue-virtual-scroller 如果您的项目列表具有固定高度，也很有趣。 (Demo)