vue前端开发性能的可优化点

背景：

在项目中前端使用vue开发，都是使用vue脚手架工具，其webpack配置文件已经将大部分性能优化了，比如代码压缩，图片base64转换，代码分离等。这些我们统统不需要去管。但使用vue时，其实还是有些细节点可以优化的，以下为开发过程中的一些前端性能优化的总结点。

内容：

1.在vue中v-for和v-if不要放在同一个元素上使用。由于 v-for 和 v-if 放在同一个元素上使用会带来一些性能上的影响，官方给出的建议是在计算属性上过滤之后再进行遍历。所以平时开发不推荐一起使用vue官网(https://cn.vuejs.org/v2/style...。如下：

2、在同一个页面中如果不需要立刻展示的组件，可以使用动态组件（动态组件主页面加载是不会加载，等到触发条件时才加载该组件，并且加载一次后就有缓存）。比如一个页面有添加页面，这个添加页面一般我们会提取出为组件，这个时候组件使用动态组件来加载可以优化性能，提高主页面的加载速度。动态组件加载方式为：

3、路由懒加载模式，与组件的动态加载类似vue路由懒加载（https://router.vuejs.org/zh/g...）。如下：

4、对于前端纯大数据展示（纯大数据指：拿到数据就是直接用于展示的，不需要做修改其中字段等处理的，而且数据量比较大）的情况下，使用Object.freeze方法来包裹变量，那边vue内部不会使用defineproperty去监听数据内部的变化，只有本身变化时才会触发，在大量数据的情况下，vue内部不在去监听数据的变化会提高性能。使用demo如下：

5、Keep-alive，vue提供了keep-alive标签来存储缓存，对于一些视频控件object或图表类的使用，我们经常会使用v-if指令，而v-if是会创建和销毁的，如果频繁操作在ie下的内存会持续上升，而keep-alive可以有效的缓存，抑制内存的持续上升vue-keep-alive（https://cn.vuejs.org/v2/api/#...）。使用方式为

![图片上传中...]

6、Es6集合Set()可优化遍历速度，set集合是可用于查找该集合内是否存在某个元素。这种维度可有效的提高遍历效率。使用场景判断当一个数组中的元素是否在已选集合内

7、scope中元素选择器尽量少用。在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。
为了给样式设置作用域，Vue 会为元素添加一个独一无二的特性，例如 data-v-f3f3eg9。然后修改选择器，使得在匹配选择器的元素中，只有带这个特性才会真正生效 (比如 button[data-v-f3f3eg9])。

问题在于大量的元素和特性组合的选择器 (比如 button[data-v-f3f3eg9]) 会比类和特性组合的选择器 慢，所以应该尽可能选用类选择器。
（https://cn.vuejs.org/v2/style...）

如果对您有帮助请点个赞，谢谢！