前言
Vue框架通过数据双向绑定和虚拟DOM技术，将我们从繁琐的DOM操作中解放出来，让我们有更多的时间去思考业务逻辑；但作为一名程序员，优化问题自然是我们必须要考虑的一个问题，本文主要讲述Vue项目性能方面的优化，使项目具有更高的性能和更好的用户体验（部分内容转自：https://juejin.cn/post/6844903846385287181）
1.组件的按需加载（异步加载）
当项目比较大页面比较多的时候，SPA页面在首次加载时候，就会变得很慢，这是因为vue首次加载的时候可能把看不到的页面组件也一并加载了，这个时候就需要对页面组件进行优化，使用到异步加载组件的方式。
{
path: '/home',
name: 'home',
component:require('@views/home').default
}
或者下面这种
{
path: '/home',
name: 'home',
component:() => import('@views/home')
}
2.屏蔽sourceMap
项目开发完成，进行打包源码上线环节，需要对项目开发环节的开发提示信息以及错误信息进行屏蔽，一方面可以减少上线代码包的大小；另一方面提高系统的安全性。在vuejs项目的config目录下有三个文件dev.env.js(开发环境配置文件)、prod.env.js(上线配置文件)、index.js(通用配置文件)。vue-cli脚手架在上线配置文件会自动设置允许sourceMap打包，所以在上线前可以屏蔽sourceMap。如下所示，index.js的配置如下,通用配置文件分别对开发环境和上线环境做了打包配置分类，在build对象中的配置信息中，productionSourceMap修改成false。
3.子组件拆分
组件拆分可以避免不必要的渲染，从而优化性能
当我们的组件的变量进行改变了之后，组件会进行重新渲染，但是很明显，有一些部分是没有必要渲染的，所以，我们可以通过把这部分的代码抽取成一个子组件来避免这些没有必要的渲染
总结就是：合理地拆分子组件可以一定程度上避免无效的渲染，减少性能的浪费
4.尽量使用computed
computed是计算属性，根据已有的变量做一些操作返回新的变量
在面对computed，watch，method的情况下，能使用computed就尽量使用computed，因为computed具有缓存的功能
5.v-for和v-if不要同时作用于同一个dom元素上
v-for 与 v-if建议不要写在同一个dom元素/组件上，不是因为会报错，而是有点浪费性能
<div v-for="item of list" v-if="showList">{{item.name}}</div>
期望：先v-if判断为true然后再进行遍历（错误）
结果：v-for的优先级高于v-if，也就是说会先进行遍历，然后再对遍历后的每个元素进行v-if判断，大大浪费性能，绝对没必要
解决办法：我们可以把v-if提到上一级元素上面，避免v-for 与 v-if写在同一个元素上
<div v-if="showList">
<div v-for="item of list" >{{item.name}}</div>
</div>
6.v-show和v-if
v-show和v-if分不清楚？
v-if：第一次为true的时候，会创建组件，第一次为false的时候不会创建组件。切换v-if的值的时候会对组件进行卸载/重新创建
v-show：第一次无论是false还是true，都会创建组件，且不会随着v-show值的改变而卸载/重新创建。只是改变了css属性display：none，将其隐藏了起来
总结就是：
如果是切换操作比较频繁的，建议使用v-show；
如果加载了之后只会出现一种结果，建议使用v-if，特别是为false的时候直接都不用创建组件；
7.v-fo循环加唯一值key
key是为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一的key属性
不建议使用index作为key值，虽然在纯展示的v-for里面是不会出现问题的，但是为了养成一个好习惯，我们可以每次都使用唯一值作为key的标示。
为什么需要唯一值key那？
因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM；虚拟dom的diff比较，如果我们不添加一个唯一值key来标示这个dom，那么它们就会按照顺序来进行对比；如果添加了唯一值key来标示，自然会按照key来进行识别对比
8.keep-alive的合理使用
是Vue的内置组件，能在组件切换过程中将状态保留在内存中，会缓存不活动的组件实例，而不是销毁，防止重复渲染DOM
prop：
- include: 字符串或正则表达式。只有匹配的组件会被缓存。
- exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
<keep-alive include="test-keep-alive">
<!-- 将缓存name为test-keep-alive的组件 -->
<component></component>
</keep-alive>
<keep-alive include="a,b">
<!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
<component :is="view"></component>
</keep-alive>
<!-- 动态判断 -->
<keep-alive :include="includedComponents">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="test-keep-alive">
<!-- 将不缓存name为test-keep-alive的组件 -->
<component></component>
</keep-alive>
结合router，缓存部分页面
使用$route.meta的keepAlive属性：
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
需要在router中设置router的元信息meta：
//...router.js
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要缓存
}
},
{
path: '/page1',
name: 'Page1',
component: Page1,
meta: {
keepAlive: true // 需要被缓存
}
}
]
})
keep-alive生命周期钩子函数：activated、deactivated
使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务
9.beforeDestory
beforeDestory这个生命周期里面做一些销毁事件的监听或者定时器的操作
不然在组件销毁的时候，有些事件的监听是不会被销毁的，需要我们主动销毁
mounted(){
window.addEventListener('click', handleClick)
},
beforeDestory(){
window.removeEventListener('click', handleClick)
}
10.Object.freeze()
在vue初始化的时候，会遍历data里面的数据，给data里面的数据进行响应式设置getter，setter。作用是为了响应式数据的改变然后更新视图
但是有的数据是永远不变的，用不上响应式，所以初始化设置getter，setter，就是性能的浪费。
所以可以加上Object.freeze()来表明，不做此数据的初始化。
data(){
return {
info:Object.freeze({
name:'rose',
age:18
})
}
}
11.内容类系统的图片资源按需加载(精灵图技术也可以使用)
对于内容类系统的图片按需加载，如果出现图片加载比较多，可以先使用v-lazy之类的懒加载库或者绑定鼠标的scroll事件，滚动到可视区域先再对数据进行加载显示，减少系统加载的数据
12.CDN的引入
- index.html引入
<body>
<div id="app"></div>
<script src="//unpkg.zhimg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="//unpkg.zhimg.com/vue-router@3.2.0/dist/vue-router.min.js"></script>
<script src="//unpkg.zhimg.com/vuex@3.4.0/dist/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.8.0/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
</body>
- vue.config.js配置
在vue.config.js文件中，增加externals，将引用的外部模块导入，如下：
module.exports = {
configureWebpack: {
externals: {
vue: "Vue",
"vue-router": "VueRouter",
vuex: "Vuex",
"echarts": "echarts",
"highlight.js":"highlight.js"
}
}
}
网友评论