前言
真的，同志们，我首先要劝大家不是逼不得已不要选择离职，更不要像我一样裸辞，离职也要骑驴找马。我还想着离职后去旅游呢，但是有点慌，约不到面试。
某羊
在合肥听起来怪有名气的公司，给我的感觉很不好，首先到了面试那天，hr直接失联了，发消息也不回，后面到公司楼下还进不去，直接语音打给他才安排上的。
进入大厅要填登记表，信息太多了，还要填家人信息，求学经历.. 有啥用呢，花里胡哨的。
然后进入hr面，开始自我介绍，为什么从上家公司离职，为什么来合肥，之前工作是做的什么项目，公司多少人，研发多少人，配比等等，然后他开始介绍公司，特意说明是单休且没有公积金？？ 单休我能理解，但是没有公积金是什么个事，我问他没公积金不是违法的吗，hr直接说这个在提上日程中。好吧，我表示既然来了后面先面试再说。
开始技术面，来了两位大佬，看起来战斗力就很强。开始战斗
面试官1：这么多年经验，在项目中有没有遇到挑战的难题，或者印象深刻的？
我：（就知道你要问这个，还好我准备了，嘿嘿,开始回答）之前在做后台管理系统的时候，客户要求“列表页打开详情页签，要全部保留详情页签，方便切换查看，且每个详情页签加上缓存”，我们知道vue中的keepAlive是根据组件中的name去进行判断是否返回新的vNode，还是返回储存的vNode，那这就导致了，我在多个相同组件切换时，保存的是第一个打开的组件vNode信息，所以我通过研究vue中keep-alive.js中源码，把通过name判断，换成通过每个页签的url作为router-view传参id，源码中通过vNode.data.key拿到id，这样就能将每个不同的url缓存下来。
面试官1：还能用其他方法进行缓存吗？这样缓存有什么缺陷？
我：（沉思片刻）有，之前在没改动源码的时候，还是通过keepAlive进行实现的，（又开始沉思），但是具体实现我忘记了，有点bug。至于其他缓存方案应该没有用keepalive好（我想的是还有sessionStorage储存页面信息，但是这个方案肯定行不通啊，太麻烦了，就没想说了）
面试官2：那你这样做缓存有什么弊端？平时遇到过bug没有？
我：（沉思一下，缓存能有什么弊端呢？没沉思到）这是客户要求做的需求，bug的话这么久还没出现过，很稳定！（我信心满满，毕竟是我自己研究出来的）
面试官2：（显得很迫切，语速开始加快）我随便说两个，假如有1000个页签进行缓存，内存不够怎么办？第二个如果详情信息拿的还是缓存里面的，不是最新数据怎么办？
我： （不急不急，一切尽在我的掌握中）1000个页签，keepAlive有max这个属性，限制最大缓存的组件是多少个。（第二个问题我没有理解他的意思）第二个问题，每次修改之后会保存啊，保存后缓存的组件信息也会实时更新的。（我说的是什么啊... 同志们，下次没理解就让面试官重新说一下，或者举个例子，别瞎说了，我急他也急）
面试官2： 不是，你没有理解我的意思，假如我在数据库中直接改当前页面的信息，或者是有两个人同时操作这个页面，第二个人先修改保存完了，第一个人还是之前的缓存数据。
我：（脑子开始混乱，这这，触及到了我的知识盲区，正常情况下这样操作了也没关系，没处理过类似问题，先回答一个试试再说，咱不交空卷）我暂时只能想到，如果要知道后端数据库实时更新，那只能用websocket进行通信，我在进入当前url的时候，传给后端url的标识，然后后端如果进行了当前页面接口的更新操作，就会返回前端提醒，表示当前页不是最新数据，让用户自动刷新。
面试官2：不用这么麻烦，还有其他解决办法吗？
我：想不出来了
面试官1：那如果我想更新当前页面的最新数据怎么办？
我：直接刷新吗？我们每个页签都有刷新，删除功能。
面试官1：用的什么方法？
我： this.$router.replace()？（好久没用过了，都快忘记了）
面试官1：还能用什么方法？基于框架上的
我：要么用provide inject去注入？（已经开始神志不清了，因为模糊中记得一开始做项目刷新就是这么做的）,在app里面写个reload方法，再在子组件里面调用。
面试官1：不是，我要的是基于框架类的，你这个还要在子组件里面调用。
我：那只能在外面layout组件中，刷新方法直接调用子组件的请求后台数据详情接口，但是要保证每个子组件方法名一样。
面试官1对我这个方法很不满意,这个问题就pass了。
面试官2：那这个问题就过了，还遇到哪些挑战和问题。
我：（...怎么还问，这个问题过不去了是吧，哥们开始汗流浃背了）emm，其他的问题就是业务逻辑上的复杂度了，比如动态表单，动态表格，还做过一个类似于wps的表格，支持上下左右箭头切换的，还有就是用canvas画了一个流程图，是根据cammada画出来的流程图二次展示（这个问答就不说了，因为面试官在问我canvas节点信息怎么渲染，如果超出你的节点范围的时候，我想不起来了，没回答上来）
然后后面我简单一些说下问了哪些问题：
1：html5新增的语意化标签有哪些？
2：cookie,seesionStorage,localStorage有什么区别？怎样实现一个sessionStorage？（怎样实现我一头雾水，待会查一下）
-
实现一个双栏布局
-
es6新增特性有哪些？map和set有什么区别？
-
promise是什么？如果在promise.then里面再写promise.then，一直写也形成了回调地狱，怎么办？（懵逼+1，为啥有这种写法，我也不知道该咋办，能不这样写吗？）（我回答用async await可以吗？这时候面试官1让我不要猜，要用你的经验直接告诉我...）（然后面试官2问如果后端抛出异常，await后面都不会执行）（我说用try catch进行捕捉）（再一次否定我，说不行，后面程序还是没走下去？）（这时候我都不知道该回答啥了，这个问题就过了）
-
事件委托机制？
-
v-model怎么实现？
-
有没有处理过按钮防重复点击？（我说项目中用的loading，但是面试官说假如我点的很快，在loading发生前就已经触发了，我回答之前做过一个自定义指令，根据状态改写按钮的disable值，面试官继续问我具体怎么实现的，我...具体代码我想不上来，只能回答大概思路）
-
了解盒模型吗？盒模型之间怎么转换？（转换我真的没看到过，还有转换这种说法，面试官提醒在css样式表中怎么操作？再一次没回答上来）
-
bfc理解，浮动高度塌陷怎么处理？
-
对定位的了解？
-
实现一个标题滚动到离底部还有50px时停止。（这个也没回答上来，确实很久没碰了，反思复习）
然后问平时有没有学习规划，下班回去后有没有自己的学习路线，对自己的职业道路有没有规划，打算做到一个什么水平？
大概就是这么多，总体来说回答的不太行，有的基础问题忘了差不多了，比如双栏布局，我只回答出来两个方法实现，其他的想不起来了，记得很模糊。
后面面试再加油吧
----------分割线更新------------
去查了一下，给同志们分享一下没回答上来的问题
1. promise是怎么解决回调地狱的？
封装一个函数，返回一个promise
function myPromise(url) {
let p = new Promise((resolve, reject) => {
try {
axios(url).then(res => {
resolve(res)
})
}
catch(e) {
reject(e)
}
})
return p;
}
// 调用函数
myPromise('getList').then(res => {
return myPromise('getList2')
})
.then(res => {
return myPromise('getList3')
})
.then(res => {
return myPromise('getList4')
})
大概就是这个意思，在.then里面return一个promise实例，有resolve再链式调用.then(),面试官可能想考的就是链式调用.then的问题，但是我回答用async await也是没毛病啊...
2. 如何自己实现一个sessionStorage？
这个我还是没查到，这不就是浏览器api实现的吗？求助一下有没有懂的同志，不知道这个要考的是哪方面的问题...
3. 盒模型的转换？
我找半天盒模型转换到底是什么意思？我当时回答的直接用box-sizing属性直接设置，搜来搜去，也只能是用box-sizing设置，不知道考官想听到的是什么答案，未解。
4. 按钮防重点击
我现在想到面试官可能想听的是防抖和节流。可惜我回答的是自己项目中实际操作场景，没想到这方面，下次注意。
防抖是在事件触发的n秒后再执行，如果重新触发则重新计时；比如用户输入；窗口的resize；
节流是在规定的时间单位内只触发一次，如果这个单位内多次触发，只有一次生效；应用：鼠标不断点击触发，监听滚动事件；
