vue el-table 650个dom渲染很慢_【前端性能优化】vue性能优化

最新推荐文章于 2023-05-06 13:28:07 发布

weixin_39949954

最新推荐文章于 2023-05-06 13:28:07 发布

阅读量2.7k

点赞数 1

文章标签： vue el-table 650个dom渲染很慢

本文链接：https://blog.csdn.net/weixin_39949954/article/details/113627437

版权

本文探讨了Vue应用的性能优化技巧，包括使用v-if减少DOM数量，避免模板内复杂表达式，合理设置key，独立样式模块防止样式冲突，保持methods简单，减少watch数据，组件拆分以及异步加载组件。还提到了打包优化，通过externals避免打包常用库，提升首屏加载速度。

摘要由CSDN通过智能技术生成

v-show，v-if 用哪个？第一个维度是权限问题，只要涉及到权限相关的展示无疑要用 v-if ，第二个维度在没有权限限制下根据用户点击的频次选择，频繁切换的使用 v-show ，不频繁切换的使用 v-if ，这里要说的优化点在于减少页面中 dom 总数，我比较倾向于使用 v-if ，因为减少了 dom 数量，加快首屏渲染，至于性能方面我感觉肉眼看不出来切换的渲染过程，也不会影响用户的体验。
不要在模板里面写过多的表达式与判断 v-if="isShow && isAdmin && (a || b)" ，这种表达式虽说可以识别，但是不是长久之计，当看着不舒服时，适当的写到 methods 和 computed 里面封装成一个方法，这样的好处是方便我们在多处判断相同的表达式，其他权限相同的元素再判断展示的时候调用同一个方法即可。
循环调用子组件时添加 key,key 可以唯一标识一个循环个体，可以使用例如 item.id 作为 key，假如数组数据是这样的 [‘a’ , ‘b’, ‘c’, ‘a’],使用 :key="item" 显然没有意义，

关注