如何优化v-for渲染（渲染1000个用户）

Question

我正在渲染+1000个用户的列表，有没有办法可以显示前20个用户，然后是第二个20个用户，直到结束？因为一次渲染所有用户需要一些时间

或渲染前20个用户然后显示其余的 我可以举例说v-for users.splice（0,20），然后v-for其他users.splice（21） 有没有简单的方法来做事

Answer 1

您尝试做的是通过添加页面变量来实现的，该页面变量包含用户当前所在页面的信息，并添加计算属性以返回用户。

computed: {
   filteredUsers() {
      return this.users.slice(20 * this.page, 20 * (this.page + 1));
   }
}

然后，如果您在此阵列上使用v-for，则可以获得所需的功能。要获得以下20个用户，您只需要逐页增加。