</keep-alive>
vue项目的优化还可以通过组件的按需加载来实现，就像图片的懒加载一样，如果客户根本就没有看到那些图片，而我们却在打开页面的时候全部给加载完了，这样会大大的增加请求的时间，降低用户的体验程度。懒加载在很多的网站都有用到，比如淘宝、京东等等这样的购物网站，上面的图片链接等等都很多，如果你把滚轴迅速的往下拉的时候，你可能会看到图片加载的情况。
补充：
Vue路由开启keep-alive时的注意点
这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了 keep-alive 的功能，所以就试用了下。当然，干任何事儿都不会一帆风顺的，在路上的磕磕碰碰在所难免，故在此记录下遇到的问题，希望看到这篇文章的人能有所帮助。ps：这个也没多难。
HTML部分：
<template>
<div class="app">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>JavaScript部分：
.....
created: function () {
console.log(1)
},
mounted: function () {
console.log(2)
},
activated: function () {
console.log(3)
},
deactivated: function () {
console.log(4)
}…..1. 什么阶段获取数据
页面生命周期钩子如上面的代码所示，这四个是最常用到的部分。这部分需要注意下，当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。
我们知道 keep-alive 之后页面模板第一次初始化解析变成HTML片段后，再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。故，页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。
所以，应该activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中。
2. $route 中的数据读不到
以前的写法是在data中将需要的 $route 数据进行赋值，便于其余方法使用，但是使用了 keep-alive 后数据需要进入页面在activated中再次获取，才能达到更新的目的。定义一个initData方法，然后在activated中启动。
initData: function () {
let _this = this;
_this.fromLocation = JSON.parse(this.$route.query.fromLocation);
