【前端性能优化】02--vue性能优化

• 01–页面加载优化
• 02–vue性能优化
• 03–JS节流(throttle)和防抖(debounce)的理解、实现和总结
• vue-cli项目打包优化

一、template

语义化标签，避免乱嵌套，合理命名属性等等标准推荐的东西就不谈了。

模板部分帮助我们展示结构化数据，vue 通过数据驱动视图，主要注意一下几点

1. v-show，v-if 用哪个？
   首先清楚一点，v-if 会销毁代码，v-show 则是将代码注释掉。所以分两个维度去思考问题，第一个维度是权限问题，只要涉及到权限相关的展示无疑要用 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。
   • 在列表数据进行遍历渲染时，给每一项item设置唯一key值，会方便vue内部机制精准找到该条列表数据。当state更新时，新的状态值和旧的状态值对比，较快地定位到diff。

二、style

1. 将样式文件放在 vue 文件内还是外？讨论起来没有意义，重点是按模块划分，建议是放在 vue 文件内部，方便写代码是在同一个文件里跳转上下对照，然后加上