Vue项目优化

一.代码优化

1.keep-alive

包裹动态组件，缓存不活动的组件实例而不是销毁他们。不会出现在父组件中，也不会渲染在DOM元素里。

include定义缓存白名单；keep-alice会缓存命中的组件。exclude定义缓存黑名单，被命中的组件不会被缓存。
很多时候会配合路由meta属性使用。

2.路由懒加载

Vue是单页面的应用，会有很多的路由引入。这样就会使webpack打包后的文件很大，当首页加载时，加载的资源过多，会有问题可能会出现白屏，使用户的使用体验很差。如果我们能把不同的路由对应的组件分割成不同的代码块，然后当路由被访问时再加载出对应的组件，这样就会很高效。也是用户的体验更好。

3.图片懒加载

懒加载就是将页面的图片未出现在可视区域时不做加载，当图片进去可视区域或者预加载区后再加载。

思路：

1. 设置图片src属性为同一地址，再设置datesrc属性来存放图片的真实地址。
2. 通过监控滚动高度来监控图片是否进入可视区域或者预加载区。
3. 当图片进去可视区域或者预加载时，通过js动态改变该图片src 属性为真实地址加载图片

4.使用节流防抖函数

在公共方法中，加如节流和防抖函数。

防抖函数

当事件被触发n秒后再执行回调，如果在这n秒中又被触发，就重新计时。

函数节流

规定在一个时间内，只触发一次函数。如果在同一时间多次触发，那么只执行一次。

5.v-for遍历必须为item使用key，避免同时使用v-if

在列表数据进行遍历渲染时，需要为item设置唯一的key值，方便vue.js内部机制精准的找到列表数据，当state更新时，将新的状态值与旧的状态值做对比。快速定位到diff

• v-for遍历避免同时使用v-if

因为v-for比v-if更有优先级，如果每一次都需要遍历整个数组，就会影响速度。当我们只需要渲染一小部分的时候，必要情况下还是要替换成computed属性。

6.v-if和v-show的区别及使用场景

v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：
如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。
所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景； v-show则适用于需要非常频繁切换条件的场景。

7. computed 和 watch 区分使用场景

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

• 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed
  的缓存特性，避免每次获取值时，都要重新计算；
• 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的

8. 长列表性能优化

Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 Vue 劫持我们的数据呢？可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

9. 事件的销毁

Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。 如果在 js 内使用 addEventListene 等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露

10. 第三方插件的按需引入

我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的体积太大，我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的。