vue项目性能优化总结

vue作为目前主流的前端框架，在github上拥有147kstar，作为vue开发大军的一员这篇文章分享一下自己使用过程中的主要针对vue项目的一些优化经验，欢迎大家一起交流(持续更新中......)

 

一.代码优化

1.v-if和v-show使用场景

v-if 是条件渲染，条件为false时，不会在dom上渲染元素，条件判断的是否渲染该元素

v-show 是显示与否，只是css层面上通过条件判断display的属性值

所以，v-if适用于运行时很少改变条件的情况，v-show适用于需要频繁切换条件的场景

2.v-for遍历添加key，并避免和v-if同时使用

使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;给每一项item添加唯一的key可以更快定位diff，更高效的更新虚拟dom

v-for优先级高于v-if，同时使用意味着每一次遍历都要进行判断，影响速度

1.如果是根据遍历数据控制是否遍历当前元素，可以在computed中对v-for的数据进行过滤

2.如果是控制整个遍历数据的判断，可以把v-if写在v-for外层

3.合理使用computed 和 watch

一个值受多个值影响用computed，一个值影响多个值用watch

可以参考这篇文章https://blog.csdn.net/qq_24510455/article/details/81057261

4.异步组件（按需加载）

有时候需要根据某一个状态来判断到底使用哪个组件，这时候并不需要加载所有可能的组件，所以就要对组件进行按需加载

 components: {
    BindBank: () => import('./modules/bind-bank.vue'),
    BindAilpay: () => import('./modules/bind-alipay.vue'),
    Bindwechat: () => import('./modules/bind-wechat.vue'),
  },
  computed: {
    componentAndNotice(){
      let active = 0 // 0 1 2
      let components = [BindBank,BindAilpay,Bindwechat]
      return {
        component: components[active],
      }
    }
  }

5.长列表优化

在vue中，会对数据进行劫持，但是对于很多大量数据列表很多时候只是纯粹的数据显示，不需要做视图响应，为了减少组件初始化的时间，可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了

6.状态管理

对于每个项目来说，状态管理是少不了的，对于vue项目来说，有很多种方式可以进行状态管理

1.父子组件之间---props和this.$emit()

2.vuex--适用于中大型SPA项目，所以千万不要一提到vue的状态管理就说vuex，也需要严格控制vuex中的数据，需要分析什么样的项目和数据需要使用vuex

3.Vue.observable( object )--2.6.0新增API

通过使用这个api我们可以应对一些简单的跨组件数据状态共享的情况。

store.js

import Vue from "vue";

export const store = Vue.observable({ count: 0 });

export const mutations = {
  setCount(count) {
    store.count = count;
  }
};

在组件中引用