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>
