VUE性能优化总结

Posted 2020-11-14 goloving

1、v-show，v-if 用哪个？

　　在我来看要分两个维度去思考问题：

　　第一个维度是权限问题，只要涉及到权限相关的展示无疑要用 v-if，

　　第二个维度在没有权限限制下根据用户点击的频次选择，频繁切换的使用 v-show，不频繁切换的使用 v-if，

　　这里要说的优化点在于减少页面中 dom 总数，我比较倾向于使用 v-if，因为减少了 dom 数量，加快首屏渲染，至于性能方面我感觉肉眼看不出来切换的渲染过程，也不会影响用户的体验。

2、不要在模板里面写过多的表达式与判断

　　v-if="isShow && isAdmin && (a || b)"，这种表达式虽说可以识别，但是不是长久之计，当看着不舒服时，

　　适当的写到 methods 和 computed 里面封装成一个方法，这样的好处是方便我们在多处判断相同的表达式，其他权限相同的元素再判断展示的时候调用同一个方法即可。

3、循环调用子组件时添加 key

　　key 可以唯一标识一个循环个体，可以使用例如 item.id 作为 key，

　　假如数组数据是这样的 [‘a‘ , ‘b‘, ‘c‘, ‘a‘],使用 :key="item" 显然没有意义，更好的办法就是在循环的时候 (item, index) in arr，然后 :key="index"来确保 key 的唯一性

　　当 Vue.js 用v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：

4、对路由组件进行懒加载

　　这里的懒加载是指在访问到对应的组件时才加载它，首屏的时候不加载。这里实现的方法很简单，只要将以前直接import组件的方式改为：

　　const Login = () => import(‘@/pages/Login’);即可。