- Оригинальный адрес:Improve performance on large lists in Vue
- Оригинальный автор:Alex Jover
- Переводчик:Дядя Программист Он
Специальная оговорка: эта статья является авторомAlex JoverОпубликовано вVueDoseряд выше.
Авторские права принадлежат автору.
Переводчик связался с автором перед переводом и получил разрешение на перевод всей серии.
Чтобы не мешать всеобщему прочтению, разрешенные записи будут размещены в конце этой статьи.
Привет, ребята!欢迎来到 VueDose 的第一篇文章。我已经准备好在 VueDose 上开启这段旅程，来帮助像你一样的开发者们来学习一些厉害的技巧。
Первый вVueDose
Текстовое содержимое
Обычно мы запрашиваем некоторые данные списка в приложении, такие как список пользователей, список продуктов, список статей и т. д.
И иногда мы не возвращаемся к этим запросам, чтобы изменить список данных, а просто показать их или сохранить их в глобальном менеджере состояний (также известном как Vuex). Коды запроса списка данных схематично выглядят следующим образом:
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = users;
}
};
VUE будет массивом по умолчаниюthis.users, свойствам первого уровня всех объектов присваиваются реактивные данные.
Это имеет очень высокую стоимость производительности для больших массивов объектов. Да, это правда, что иногда данные списка разбиты на страницы, но всегда будут случаи, когда они не разбиты на страницы, а затем отображены во внешнем интерфейсе.
Практическим примером являются данные списка маркеров Google Maps, которые представляют собой большой массив с множеством объектов.
Таким образом, в некоторых конкретных случаях, если мы можем запретить Vue делать эти данные списка реактивными, мы можем внести некоторые улучшения в производительность проекта. На самом деле, мы можем сделать это, используяObject.freezeметод замораживания полученных данных списка перед их назначением компоненту:
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
}
};
Помните, то же самое можно применить к практике Vuex:
const mutations = {
setUsers(state, users) {
state.users = Object.freeze(users);
}
};
Кстати, если вам действительно нужно изменить список запросов данных, то вы все равно можете добиться этого, создав новый массив. Например, чтобы добавить исходный список элементов данных одного типа, чтобы работать так:
state.users = Object.freeze([...state.users, user]);
Может быть, вы не можете не задаться вопросом, сколько улучшения производительности может принести эта операция? Для получения подробной информации см. следующую статью, пожалуйста, продолжайте обращать внимание!
На сегодня все, надеюсь вам понравится 😛.
Вы можете прочитать это онлайноригинальный，里面有可复制粘贴的源代码。 Если вам понравилась эта серия, поделитесь ею с коллегами!
Эпилог
Другие статьи из этой серии будут синхронизированы с выпуском официального сайта серии и будут своевременно переведены и опубликованы в Nuggets. Пожалуйста, продолжайте следить"Программа Обезьяны, дядя Хе", я верю, что принесу вам больше качественного контента, не забудьте поставить лайк~
Если вы хотите узнать больше обо мне, пожалуйста, проверьте ниже:
- личный блог:blog.hadesz.com
- Персональный репозиторий на гитхабе:github.com/hadeshe93
- Личный публичный аккаунт WeChat: поиск «Дядя Он, программист»