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

Question

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

或渲染前 20 个用户然后显示其余的我可以例如 v-for users.splice(0,20)，然后 v-for the rest users.splice(21) 是否有任何简单的方法来做事

Answer 1

您可以通过添加一个页面变量来尝试执行此操作，该变量包含用户当前所在页面的信息，并添加一个计算属性以返回用户。

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

然后，如果您在此数组上使用 v-for，您将获得所需的功能。要获得以下 20 个用户，您只需将页面增加一即可。