前端工程师的摸鱼日常（14）
“乘客您好，欢迎乘坐地铁13号线列车，本次列车开往西直门站方向。列车运行前方是回龙观站，下车的乘客请提前做好准备。”
突然的语音播报将我从困意中抽醒，拥挤的车厢，难闻的气味，踩着我脚的老阿姨都让我感觉到一阵阵厌恶，压抑的使我喘不过气。转眼一看，咦，仙女，我的肾上腺素已经在直线飙升？不远处一位眉清目秀的小姐姐，扎着两个丸子头，淡淡的眼影，眉清目秀，晶莹剔透，明亮的我好像能从她的双眼里看见全世界！！不，我只看到了我！
即使戴着口罩我依然能看见她的美！这可恶的人群，寸步难行，即便是有想搭讪的想法，现在这种情况也只能将它扼杀！罢了，我与仙女失之交臂。我恨这万恶的工作日，葬送了我的缘分。算起来，这是我单方面遇见并且还心生喜欢的第三百二十七个女孩子，纵使我陷入了第七次恋爱！只对她的那一眼，我就觉得我是第一次一见钟情，而之前的全都是见色起意！
还有一站，就到龙泽了，我得下去挤公交。想到这里，不由得叹息。上天总爱捉弄我，我与她，终将是错过！在这，我离她两米，可她却离我两万里，因为她没有注意到我也没有正眼看我。人海茫茫，有些人终究是过客，即便是没有过交集，但，有那么一瞬间，她就是我女朋友，心里拥有过就够了！等到第三百二十八个女孩子的时候，她就是我前女友。我很享受接下来的几分钟，因为它给了我无限的遐想…
已经到站！我注视着13号地铁离开，不是在送它，而是在送她！或许下一次再见时，我已忘记她的样子，也或许，此生不会再见！在这一刻，我瞅了一眼时间，已经快迟到的我，好像也没有那么在乎了。人人都骂周幽王，此时我就是幽王！
插个广告，稍后精彩继续！
1、使用keep-alive缓存不活动的组件
keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
在动态组件中的应用
<keep-alive : include="whiteList" : exclude="blackList">
<router-view></router-view>
</keep-alive>
在vue-router中的应用
<keep-alive : include="whiteList" : exclude="blackList">
<router-view></router-view>
</keep-alive>
include定义缓存白名单，keep-alive会缓存命中的组件；exclude定义缓存黑名单，被命中的组件将不会被缓存；
很多时候也可以配合路由的meta属性使用
export default[
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被缓存的组件
},
{
path:'/book',
name:'book',
components:Book,
meta:{
keepAlive:false //不需要被缓存的组件
}
]
<keep-alive>
<router-view v-if="this.$route.meat.keepAlive"></router-view>
<!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--这里是不会被缓存的组件-->
2、 路由懒加载
Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。
路由懒加载：
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: ()=>import('@/components/DefaultIndex') }
]
})
懒加载：也叫延迟加载，即在需要的时候进行加载，随用随载。 使用懒加载的原因： vue 是单页面应用，使用webpcak打包后的文件很大，会使进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。运用懒加载后，就可以按需加载页面，提高用户体验
非懒加载的路由配置：
import Vue from 'vue'
import Router from 'vue-router'
import DefaultIndex from '@/components/DefaultIndex'
import Index from '@/components/Index'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: 'DefaultIndex ',
children: [
{
path: '',
component: 'Index'
},
{
path: '*',
redirect: '/Index'
}
]
}
]
})
懒加载的写法：
//最流行的写法，es6语法
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: () => import('@/components/DefaultIndex'),
children: [
{
path: '',
component: () => import('@/components/Index')
},
{
path: '*',
redirect: '/Index'
}
]
}
]
})
//或者下次这样 AMD规范
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: resolve => require(['@/components/DefaultIndex'], resolve),
children: [
{
path: '',
component: resolve => require(['@/components/Index'], resolve)
},
{
path: '*',
redirect: '/Index'
}
]
}
]
})
广告回来，精彩继续！
短暂的惋惜之后，我拖着一具行尸走肉，没有灵魂的躯壳冲出了地铁，班还是要上的。
公交车来了，还好，人不多，还有我的位置。我望着窗外，刚才的那个女孩已经深深的印在了我的脑子里。春心莫共花争发,一寸相思一寸灰！八点五十六分到达公司楼下，还行，还有4分钟，来得及…公司的小姑娘还挺多，其中一个大白腿也挺长，只可远观，而不可亵玩也！嗯？13楼，也不知道哪个部门的，有空得去看看…不过我还是心系于刚刚那个女孩。
昨天的需求还没改完，适配是真让人头疼。产品经理也是个奇葩，女的，据说二十五六岁。成天没事找事。现在的产品真水，随便拉一个人都能干。。我们项目组一个安卓，天天吵着要去给她放产假。放产假也来不及，那都十个月以后的事儿了。
整整一天，我都没心思干活。晚上还被叼了一顿，给我领导气的。他拿着ipad，跟我说，这个ios跳转到H5为什么没有跳过去，还有那个页面为什么没数据，是不是没调接口。又给我来一句，这个需求今晚要上，你能不能干，不能干滚蛋！我脑子突然抽筋了似的，给他来一句，我刚看安卓是好的啊！等说完这句话我就反应过来了，安卓的跟ios有什么关系。。。迟了，他气的把ipad往地上一摔扭头就走了。。。
等会儿，这跟我没关系啊。H5的地址已经给ios发过去了，他没做跳转跟我有什么关系。还有我们H5通过DSBridge + flyio 调用原生发的网络请求。我已经写好方法通知ios去调接口了，他没调，跟我有什么关系。我都无语死了，又是替原生背锅的一天。本来tmd丢了小姐姐都失魂落魄的，又给我整这事。还当着那么多同事的面骂我，我超！真他么公司前端有好些，打听打听谁是爹！
从这事儿以后，没过多久我就提离职了，他还不让我走，据我所知他们那个项目在我之前已经招了好几批人了，都没人愿意干，爱谁干谁干吧。就没有一天能在十点之前下班的，天天屁事还多的要死。
他们找了个联想的架构师，兼职的，一天给人家800块钱。人家来了以后发现是每天画页面，都给人整无语了。
反正我是要走的。离职的最后一天，我的那两个牛马朋友来公司找我了，说晚上要请我吃火锅。在我公司附近的商场转悠了三个小时硬是不知道吃什么。最后得出的一致结论是火锅。
图为 朋友来我公司坐坐，拍摄于2020年！
北京的消费还是很高的，吃完火锅洗了个脚按了个摩花了两千块！！已经是夜里3点了。明天在玩一天，后天我就去昆明了。拜拜了您嘞！
—— 忆 京城那些事儿 壬寅年正月十八申时 江辰
进群摸鱼V我：ZiChen-Jiang1122
学习完毕，下课！
我是江太公，山水有相逢！
