【译】Vue实用笔记(一):提高大量数据的渲染性能

如题所述

第1个回答  2022-06-17

大家好,欢迎大家来看我的第一个笔记!我下定决心开始在Vu eDose上尝试给像你一样的开发者们一些奇技淫巧。

VueDoes的技巧将会非常简洁明了,希望这种格式你会更能抓住重点。好了各位看官,我们直奔主题吧。

通常我们需要渲染一个非常大的数组对象,例如用户列表,对象列表,文章列表等等等等。
但是有关的时候我们并不需要修改他们,仅仅作展示用,或者用vuex中的全局状态管理对象保存。下面是一个简单的例子:

Vue官方文档:

把这种非常大的只用来展示的数组的属性变成响应式的属性,会消耗很多浏览器解析时间(可以实用google的开发者工具查看,下篇文章会提到)。虽然有时候,这些数据会做分页加载,但是你仍然会把这些数据在前端存储。

又比如制作谷歌地图的数据,通常是一个非常大的对象。

所以在以上的场景中,我们可以通过减少这种数据的响应式转换来提供前端的性能。那么咋办呢?我们可以在给Vue的data属性或者Vuex的state对象的属性赋值时,先用 Object.freeze 处理一下。

1.Vue的data属性

2.Vuex的state对象的属性:

顺便说一下,当你需要修改这个数据,你可以通过创建一个新的对象数组。
当你需要增加一个对象,可以参考下面这个例子:

想了解具体提升了多少 性能 吗?欲知后事如何,请看下篇分解。

这就是今天所有的内容!希望你们能给个大拇指😛。

Remember you can read this tip online (with copy/pasteable code) and please share VueDose with all your colleagues if you liked it!

See you next week.

Alex