Как оптимизировать v-for рендеринг (рендер 1000 пользователей)

Question

Я рендерил список +1000 пользователей, есть ли способ, например, показать первые 20 пользователей, затем вторые 20 до конца? потому что это занимает некоторое время, чтобы сделать все пользователи одновременно

или визуализируйте первых 20 пользователей, затем покажите остальное, что я могу, например, v-for users.splice(0,20), а затем v-для остальных users.splice(21). Есть ли простой способ сделать что-то

Answer 1

То, что вы пытаетесь сделать, возможно, добавив переменную страницы, которая содержит информацию о том, на какой странице в данный момент находится пользователь, и добавление вычисляемого свойства для возврата пользователям.

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

Затем, если вы используете v-for для этого массива, вы получите желаемую функциональность. Чтобы получить следующие 20 пользователей, вам просто нужно увеличить страницу на один.