「译」 VueDose Tip 1 - 提高 Vue 中大型列表的性能
晨曦 2020-01-01 Vue 2VueDose性能优化文章翻译
通常，我们需要获取对象列表，例如 user 列表，item 列表，articles 列表等等。
有时，我们甚至不需要修改它们，仅显示它们或者将它们保存在全局 state 中（例如 Vuex）。一段用于获取该列表的简单代码如下所示:
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = users;
}
};
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
默认情况下，Vue 会使数组中的每个对象的每第一级的属性变为响应式。
对于大型对象而言，这可能会很昂贵。是的，有时候这些列表使分页的，但是你可能只在前端列出了其他列表。
Google Maps 的 markers 通常就是这种情况，实际上它们是很庞大的对象。
因此，在这些情况下，如果我们阻止 Vue 让这些列表变为响应式，那么我们就可以获得一些性能。我们可以让列表在添加到组件之前使用 Object.freeze 来做到这一点：
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
}
};
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
请记住，这同样适用于 Vuex：
const mutations = {
setUsers(state, users) {
state.users = Object.freeze(users);
}
};
1
2
3
4
5
2
3
4
5
顺便说一句，如果你需要修改这个数组，你仍然可以通过创建一个新的数组来做到。例如，为了添加一项，你可以通过以下方式进行操作：
state.users = Object.freeze([...state.users, user]);
1
你是否想知道性能提升了多少？ 我们将在下一个技巧中看到它，请继续关注！