常用的性能优化方案

  • 一、路由懒加载
  • 二、keep-alive缓存页面
  • 三、使用v-show复用DOM
  • 四、v-for遍历避免同时使用v-if
  • 五、长列表性能优化
  • 六、事件的销毁
  • 七、图片懒加载
  • 八、第三方插件按需引入
  • 九、无状态的组件标记为函数式组件
  • 十、子组件的合理切割
  • 十一、变量本地化

一、路由懒加载

减小代码打包体积，按需加载路由页面。

const router = new VueRouter({ 
  routes: [ 
    { path: '/foo', component: () => import('./Foo.vue') }   ] 
})

二、keep-alive缓存页面

<template> 
  <div id="app"> 
    <keep-alive> 
      <router-view/>    
    </keep-alive> 
  </div> 
</template>

三、使用v-show复用DOM

v-if会根据条件生成或卸载节点，v-show只是隐藏或显示节点。对于用户可能频繁操作的节点可以使用v-show代替v-if。

<template> 
  <div class="cell"> 
    <!--这种情况用v-show复用DOM，比v-if效果好-->
    <div v-show="value" class="on"> 
      <Heavy :n="10000"/> 
    </div> 
    <section v-show="!value" class="off"> 
      <Heavy :n="10000"/> 
    </section> 
  </div> 
</template>

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

相关内容可参考《v-for和v-if的优先级及其性能优化》

五、长列表性能优化

  1. 如果列表是纯粹的数据展示，不会有任何改变，就不需要做响应化。
    如：
export default { 
  data: () => ({ 
    users: [] 
  }), 
  async created() { 
    const users = await axios.get("/api/users");     	this.users = Object.freeze(users); 
  } 
};
  1. 如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容。
    如：
<recycle-scroller class="items" :items="items" :item-size="24"> 
  <template v-slot="{ item }">    
  	<FetchItemView :item="item" @vote="voteItem(item)"/> 
  </template> 
</recycle-scroller>
  1. 参考：vue-virtual-scroller、vue-virtual-scroll-list

六、事件的销毁

Vue 组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。

created() { 
	this.timer = setInterval(this.refresh, 2000)
}, 
beforeDestroy() { 
	clearInterval(this.timer) 
}

七、图片懒加载

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域 内的图片先不做加载， 等到滚动到可视区域后再去加载。

<img v-lazy="/static/img/1.png" :key='xxx'>

参考：vue-lazyload

八、第三方插件按需引入

像element-ui这样的第三方组件库可以按需引入避免体积太大。

import Vue from 'vue'; 
import { Button, Select } from 'element-ui'; 

Vue.use(Button)
Vue.use(Select)

九、无状态的组件标记为函数式组件

<template functional> 
  <div class="cell"> 
    <div v-if="props.value" class="on"></div>
    <section v-else class="off"></section> 
  </div> 
</template> 

<script> 
export default { 
  props: ['value'] 
} 
</script>

十、子组件的合理切割

可参考《Vue的常见问题(五) - 组件化的理解》

十一、变量本地化

如果直接访问data中的数据进行操作，会触发数据响应式的相关操作，我们进行变量本地化，对本地变量操作从而减少性能消耗。

<template> 
  <div :style="{ opacity: start / 300 }">
  	{{ result }} 
  </div> 
</template> 
<script> 
import { heavy } from '@/utils' 
export default { 
  props: ['start'], 
  computed: { 
    base () { return 42 }, 
    result () { 
      const base = this.base // 不要频繁引用this.base。let result = this.start 
      for (let i = 0; i < 1000; i++) { 
        result += heavy(base) 
      } 
      return result 
    } 
  } 
} 
</script>