vue系列

vue生命周期

• beforeCreate在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前被调用。
• created实例已经创建完成之后被调用。在这一步，实例已完成以下的配置:数据观测(dataobserver)，属性和方法的运算， watch/event事件回调。这里没有$el
• beforeMount在挂载开始之前被调用︰相关的render函数首次被调用。
• mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
• beforeUpdate数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
• updated发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新
• beforeDestroy实例销毁之前调用。在这一步,实例仍然完全可用。
• destroyed Vue 实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

Vue项目如何做性能优化

一、代码层面的优化

v-if 和v-show区分使用场景

• v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• v-show就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS的display属性进行切换。
• v-show就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS的display属性进行切换。

computed和method区分使用场景

• computed:是计算属性,依赖其它属性值，并且computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值;
• 当我们需要进行数值计算，并且依赖于其它数据时，应该使用computed，因为可以利用
  computed的缓存特性，避免每次获取值时，都要重新计算;

v-for遍历必须为item添加key，且避免同时使用v-if

• 在列表数据进行遍历渲染时，需要为每一项item设置唯一key值,方便Vue.js内部机制精准找到该条列表数据。当state更新时，新的状态值和旧的状态值对比，较快地定位到diff 。
• v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组,将会影响速度，尤其是当之需要渲染很小—部分的时候，必要情况下应该替换成
  computed属性

长列表性能优化

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

图片资源懒加载

• 对于图片过多的页面，为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用Vue的vue-lazyload插件

事件的销毁

路由懒加载