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）

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

1 个答案: