vue 性能优化点

vue项目中，经常会遇到一些性能优化点，以下就是我在工作中，总结的优化点

vue 性能优化点

1，路由懒加载

{
   path: '/nextTick',
   name: 'nextTick',
   component: resolve => require(['@/components/nextTick.vue'], resolve)
   // component: () => import(/* webpackChunkName: "about" */ '@/components/nextTick.vue'), 
},

2，keep-alive 缓存页面

<div>
  <keep-alive>
     <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive" />
</div>

3，多使用 v-show，少使用v-if

因为v-show只会重绘，不需要操作DOM，而v-if就会触发重排，操作DOM

4，v-for 遍历尽量避免同时使用v-if

1，显然v-for优先于v-if被解析。
2，如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能。
3，要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环。
4，如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项。

5，长列表优化

• 如果纯展示，可以冻结数据，无须做响应式

export default { 
  data: () => ({ 
    users: [] 
  }), 
  async created() { 
    const users = await axios.get("/api/users");        this.users = Object.freeze(users); 
  } 
}; 

• 虚拟滚动，只渲染少部分区域内容 vue-virtual-scroller

6，事件销毁，比如：定时器

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

7，图片懒加载 <img v-lazy="xxx">

// 1，安装
npm install vue-lazyload --save-dev

// 2，在入口文件main.js中引入并使用
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
     loading: require('img/loading.png'), //加载中图片，一定要有，不然会一直重复加载占位图
     error: require('img/error.png')  //加载失败图片
});

// 3，修改图片显示方式为懒加载
// img
<img v-lazy="'/static/img/' + item.productImage" :key="'/static/img/' + item.productImage"> 
//将 :src 属性直接改为v-lazy, :key是为了防止刷新页面或图片更改时图片不更新

// 背景图
<div  v-lazy:background-image="{src: item.imgpath}"></div>

`简单来说，就是图片属性直接改为v-lazy，两者进行切换，来实现懒加载`

8，第三方库按需引入

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

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

9，无状态的组件标记为函数式组件：运行时，消耗资源较小

<template functional> 
  <div class="cell"> 
    我的函数式组件展示
  </div> 
</template> 

<script> 
export default {} 
</script> 

10，子组件分割：需要经常渲染的组件单独拆分，避免整个父组件渲染耗时长

当子组件需要来回反复进行渲染时，我们可以把他单独抽出来，这样就会避免该组件中其他的组件跟着重复渲染，降低性能损耗

11，变量本地化：如果数据是固定值，尽量避免计算属性重复调用，减少性能损耗

<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>