【译】Vue实用笔记（一）：提高大量数据的渲染性能

Posted 2023-05-11

参考技术A

大家好，欢迎大家来看我的第一个笔记！我下定决心开始在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

[译]: Vue.js 函数式组件：what, why & when?

原文：https://medium.com/js-dojo/vue-js-functional-components-what-why-and-when-439cfaa08713

要义：如果你的组件不需要状态化，将其转换为一个 函数式组件（functional component） 可提高 70% 的渲染性能

What - 何为函数式组件？

functional component (别跟 Vue 的 render function 搞混) 是一个不持有状态也没有实例的组件。

说白了，这就意味着这种组件不支持反应式，并且不能用 this 关键字引用到自身。

基于模板的函数式组件

基于 render 函数的函数式组件

访问组件属性

你肯定会疑惑，离开了状态或实例，怎么引用诸如 data 或 methods 等东西。幸运的是，Vue 在 render() 中提供了一个 context 参数，该参数是一个有下列属性的对象：

• props：提供所有 prop 的对象
• children：VNode 子节点的数组
• slots：一个函数，返回了包含所有插槽的对象
• scopedSlots：(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
• data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
• parent：对父组件的引用
• listeners：(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
• injections：(2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的 property。

访问这个 context 参数相当简单。举例来说，如果想获得属性，这样就可以：

在模板中访问上下文

在 render 函数中访问上下文

以上是关于【译】Vue实用笔记（一）：提高大量数据的渲染性能的主要内容，如果未能解决你的问题，请参考以下文章

每日一题之vue渲染大量数据应该怎么优化

Mapbox大数据量渲染策略

Actionscript 3：预渲染类实例以提高性能

前端必须搜藏Vue版的团队代码规范

Vue学习笔记 - 页面数据渲染的方式

提高 Rails 视图渲染的性能