探索vue2框架的世界：关于vue2.x的性能优化和常见的白屏原因

在本篇文章中，博主总结了一些常见的vue2框架性能优化方法和项目启动出现白屏的原因，还望走过路过的同行和大神们点赞关注,多多指教，用你们发财的小手给予博主大大的鼓励👍👍👍。

vue2x 性能优化

👉1.路由懒加载，有效拆分应用大小，访问时才异步加载

• vue是单页面应用，可能会有很多的路由引入，这样使用webpack打包后的文件会很大
• 当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验
• 如果我们能把不同的路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更高效了。这样会大大提高首屏显示的速度，但是可能其他页面的速度就会降下来

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

👉2. keep-alive 缓存页面，

避免重复创建组件实列，且能保留缓存组件状态。

👉3. v-for和v-if避免同时使用

• v-for遍历必须为item添加key

在列表数据进行遍历渲染时，需要为每一项item设置唯一的key值，方便vue.js内部精准找到该条列表数据。当state更新时，新的状态值和旧的状态值相比，较快的定位到diff

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

v-for比v-if优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必须情况下应该替换为computed属性。

👉4. 长列表性能优化，可采用虚拟列表

vue会通过Object.defineProperty对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们不需要vue来劫持我们的数据，在大量数据展示的情况下这能够很明显的减少组件初始化的时间，那如何禁止vue劫持我们的数据呢？可以通过Object.freeze方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了

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

👉5. v-once

不再变化的数据可以使用v-once

👉6. 事件销毁，组件销毁后把全局变量和定时器销毁

Vue组件销毁时，会自动清理他与其他实例的连接，解绑它的全部指令以及事件监听器，但是仅限于组件本身的事件，如果在js内使用addEventListener等方式时不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄漏

created(){
	addEventListener('click',this.click,false)
}
beforeDestory(){
	removeEventListener('click',this.click,false)
}

👉7. 图片懒加载

对于图片加载过多的页面，过了提高页面的加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载，这样对于页面的加载性能上会有很大的提升，也提高了用户体验，我们在项目中使用vue-lazyload插件

1.安装

npm install vue-lazyload --save -dev

2.在入口文件main.js引入并使用

import VuelazyLoad from  'vue-lazy-load'

然后在vue中直接使用

Vue.use(VueLazyLoad)

或者添加自定义选项

Vue.use(VueLazyLoad,{
	preload:1.3,
	error:'dist/error.png',
	loading:'dist/loading.gif',
	attempt:1
})

3.在vue文件中将img标签的src属性直接改为v-lazy，从而将图片显示方式更改为懒加载显示

<img v-lazy="/static/img/1.png">

8. 第三方插件按需引入

我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的整个体积太大，我们可以借助babel-plugin-component，然后只引入需要的组件，以达到减小项目体积的目的，以下为项目中引入elementui组件库

• 首先，安装babel-plugin-component

npm install babel-plugin-component -D

• 然后将.babelrc修改为

{
   "presets":[[