vue用法指南06(vue项目的一些优化)

1.vue循环中,key值尽量不要用index序号

理由：我们都知道，JS操作dom是很耗性能的，而vue采用的虚拟DOM。也就是说vue是通过js代码来描述dom节点，当dom发生变化的时候，我们只需要去对比和修改这段js代码即可。虚拟don对比的算法页脚diff算法，当我们加上key之后，就相当于给虚拟的dom节点加上了标志，算法就可以根据这个标志去匹配，而不用把每一个节点都循环一遍，以节省算法匹配的时间。

2.vue中涉及计算的尽量使用computed，少用methos方法

理由：在前面的文章我们讲过，computed会自动帮我们做缓存，只有当依赖的数据发生变化时才会重新渲染。

3.子组件中尽量不要涉及业务逻辑

理由：子组件中只暴露方法，具体业务处理放在父组件便于统一管理，也方便维护，另一个原因是，当父组件重新渲染的时候，子组件也会重新渲染一遍。（在react有一个shouldComponentUpdate生命周期函数，可以让子组件只在依赖数据发生变化时才重新渲染，但vue暂时并没有这个机制，在之后vue3.0中会解决这个问题）

4.尽量不要操作dom

理由：之前讲过js操作dom是很费性能的，如果需要操作dom可以使用ref，使用ref其实操作的是虚拟dom

5.代码的懒加载（require.ensure， import）

理由：我们知道，vue使用的构建工具是webpack,而在webpack中是支持懒加载的，也就是通过require.ensure()方式或者通过import()来实现。（通常一般放在路由加载中）

6.keep-alive组件缓存

理由：在我们频繁的切换组件的时候，组件都会重新渲染，为了减少性能开销，对一些频繁切换的组件做keep-alive缓存。