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 缓存页面

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，图片懒加载

// 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
 
//将 :src 属性直接改为v-lazy, :key是为了防止刷新页面或图片更改时图片不更新

// 背景图


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

8，第三方库按需引入

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

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

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

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

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

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