自学前端拿到offer的心路历程

热乎的面经附答案

先交代下是在二线城市，所以也面不了什么大厂自然也就没什么大厂面经(就算有我也没有这个实力)，昨天面试了一家中小型的公司，这里就不透露名字了，总共面了两轮总结后写下了这篇文章，我相信也是有很多和我在二线城市的小伙伴需要这些常见的面试题的，我是刚毕业出来实习，所以马上要出去找实习的小伙伴可以看看，参考下。

面试之前准备什么？

老实说，我面这家公司的时候之前没有复习！早上第一面，下午就通知第二面了，几乎是裸面的状态（当然过程也非常惨）。

所以建议大家如果准备面试的话，还是需要提前复习下，做好准备，时间方面自己把握下，建议一周内就行了，主要把写在简历上的项目搞透，从项目的结构、所用到的技术、难点、亮点都要知道，要能够自己描述出项目中用了哪些，自己完成了哪些。

刷面经看一看最近的面经文，了解现在公司都在面什么类型的题，准备一些常见题，自己背一背。

项目把你写在简历上的的项目从技术架构到源码都要做到足够了解，至少面试的时候不要被面试官问住了。

亮点准备一些自己的亮点，因为面试的问题你不可能每个都回答上来，但是在面试的过程中一定要有亮点，不然问你的一些问题都是回答的一般般，让面试官感觉不到你那方面比较擅长（你就会得到反馈，面试官说你还行，但是没有过～）， 你可以准备几个点，每个点都保证可以吹上个半小时。另外一定要了解的很深入，一定要能够流畅的表达出来！

练手先找几家不太想去的公司（规模差不多但离你住的地方比较远等等原因。。）练练手，如果第一次面试就去心仪的公司面试，淘汰率会非常高。特别是实习生还没有面试过的，建议多面几家再去综合考虑去哪家，我见过太多我身边的朋友因为毕业着急找工作随便投简历，面试通过了就入职了，干了一两周就说不想去了，跑路又重新找，这样的话其实非常得不偿失，时间也花了也没找到心仪的工作。

心态最后就是你的心态了，心态很重要！！！面试不过很正常，不证明你不优秀，只是不适合，总结面试经验，为下一次做准备。像我第一次面的第一家公司问的很多问题都回答不上来，boss上写的招实习生，最后面试我的人尽问一些奇葩问题，前端不需要写页面，后端也不需要写接口，最后说公司需要中级前端，我目前只能是个初级前端，不符合公司要求。我就纳闷了招中级前端写招聘实习生？？？整个面试下来10分钟不到，到时我都快气炸了。也有点影响后面的面试，所以一定要有个好的心态面对面试结果。

还能记住的面试题

方便读者阅读我将面试题进行了个分类，这篇主要写跟vue和项目相关的面试题，因为我简历上写了三个项目，所以大部问题都是从项目开始切入的，有些记不住，回答的也不是太好。。。我会把网上的详细文章贴出来，让读者能更详细的学习。

vue相关

Vue实例的生命周期讲一下, mounted阶段真实DOM存在了嘛?

Vue实例从创建到销毁的过程，就是生命周期。

也就是：开始创建->初始化数据->编译模板->挂载dom->数据更新重新渲染虚拟dom->最后销毁。 这一系列的过程就是vue的生命周期。所以在mounted阶段真实的DOM就已经存在了。

beforeCreate：vue实例的挂载元素el和数据对象data都还没有进行初始化，还是一个undefined状态

created: 此时vue实例的数据对象data已经有了，可以访问里面的数据和方法，el还没有，也没有挂载dom

beforeMount: 在这里vue实例的元素el和数据对象都有了，只不过在挂载之前还是虚拟的dom节点

mounted: vue实例已经挂在到真实的dom上，可以通过对dom操作来获取dom节点

beforeUpdate: 响应式数据更新时调用，发生在虚拟dom打补丁之前，适合在更新之前访问现有的dom，比如手动移除已添加的事件监听器

updated: 虚拟dom重新渲染和打补丁之后调用，组成新的dom已经更新，避免在这个钩子函数中操作数据，防止死循环。

beforeDestory: vue实例在销毁前调用，在这里还可以使用，通过this也能访问到实例，可以在这里对一些不用的定时器进行清除，解绑事件。

destoryed：vue实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁。

2.Vue中的的通信方式有几种？隔代组件的通信你用那种方式解决？

总共有7种，当时是只回答了4种

props/$emit 适用父子组件通信

ref与parent/children适用父子组件通信

EventBus(事件总线) 适用于父子、隔代、兄弟组件通信

atter/listeners 适用于隔代组件通信

provide/inject 适用于隔代组件通信

vuex 适用于父子、隔代、兄弟组件通信

slot插槽方式

3.Vue中的常见指令有那些？？

v-text/v-html/v-for/v-show/v-if/v-else/v-cloak/v-bind/v-on/v-model/v-slot…

vue的指令还是得都记住的，这里是按照我的记忆方式排列的，大家可以有自己的记忆方式。

4.v-show和v-if有什么区别？？

v-show是css切换，v-if是完整的销毁和重新创建，如果频繁切换时用v-show，运行时较少改变用v-if

5.谈谈你对vuex的理解？

vuex是一个专门为vue.js开发的状态管理模式，每一个vuex应用核心就是store(仓库)。store基本上就是一个容器，它包含着你的应用中大部分的state(状态)

vuex的状态存储是响应式的，当vue组件中store中读取状态时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。

改变store中的状态的唯一途径就是显示commit(提交)mutation，这样使得我们可以方便地跟踪每一个状态的变化。

主要有以下几个模块：

State: 定义了应用状态的数据结构，可以在这里设置默认的初始状态

Getter: 允许组件从Stroe中获取数据，mapGetters辅助函数仅仅是将store中的getter映射到计算属性。

Mutation: 唯一更改store中状态的方法，且必须是同步函数。

Action: 用于提交muatation, 而不是直接变更状态，可以包含任意异步操作。

Module: 允许将单一的store拆分为多个sotre且同时保存在单一的状态树中

其他

前端的异常处理有做过嘛？？做过哪些？

遇到这个问题我是蒙的，说实话真本地没想过面实习会问到我异常处理问题。我当时只讲了

js中的编码错误异常

http请求异常

Promise异常的处理

其实还有很多种，我连window.error来捕获运行错误都没讲

场景题

1.如果有一张很大的图片放到线上, 显示要很久, 你会怎么优化?

我当时只回答了这两点，其他的我也不知道。。。

用延迟加载技术

优化图片的大小

2.项目中遇到过那些复杂的业务场景，怎么解决的？

这个就看个人回答了，不同的项目遇到的问题也不一样。

3.封装组件你有什么好的想法

对于这个问题我是蒙的，可能是因为我简历上写了很好的组件化开发思想吧（说实话当时的回答有点打脸)，我是从代码方面回答的。

通过vue.extend，vue.component注册这种方式找到项目通用的模块，指定通用部分代码，props传值，并且通过slot来自由定制内容，然后创建vue文件。

对于这种问题网上也没有好的回答，欢迎大佬在下方评论交流。

4.在众多表单中都需要用到点击查询按钮根据参数的不同来弹出一个查询框，里面有个小列表,查到数据后点一行再回显， 你怎么封装这个组件? (就是多个页面中需要查询显示数据列表)

我说下我的大概思路，首先分析需求：需要什么？

一个form表单，一个table，分页

n个条件框，查询按钮、重置按钮、其他功能按钮。。

需要实现的功能

查询

点击分页后查询数据

重置

选中一行后拿到数据

其他功能的触发

最后确定那些数据是需要外部传入就ok了。

5.你觉得你这个防小米商城项目中最大的亮点是什么？？

在订单确认页面，使用自行封装dialog通过slot自由定制内容的方式来实现，新增、编辑、删除收货地址的对应元素，用户点击的不同实现对应功能

我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流裙：前面：851 中间：231 最后：348。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

昨天居然接到HR说我通过面试了，给发了offer。希望自己能在这家公司快速成长。 博主也是自学的前端，能体会到自学路上那种时而迷茫时而充满希望的滋味，希望和我一样自学的前端小伙伴能够坚持下去，加油!!!

原著是一个有趣的人,若有侵权,请通知删除