先交代下博主是在二线城市,所以也面不了什么大厂自然也就没什么大厂面经(就算有我也没有这个实力),昨天面试了一家中小型的公司,这里就不透露名字了,总共面了两轮总结后写下了这篇文章,我相信也是有很多和我在二线城市的小伙伴需要这些常见的面试题的,我是刚毕业出来实习,所以马上要出去找实习的小伙伴可以看看,参考下。
老实说,我面这家公司的时候之前没有复习!早上第一面,下午就通知第二面了,几乎是裸面的状态(当然过程也非常惨)。
所以建议大家如果准备面试的话,还是需要提前复习下,做好准备,时间方面自己把握下,建议一周内就行了,主要把写在简历上的项目搞透,从项目的结构、所用到的技术、难点、亮点都要知道,要能够自己描述出项目中用了哪些,自己完成了哪些。
刷面经
看一看最近的面经文,了解现在公司都在面什么类型的题,准备一些常见题,自己背一背。项目
把你写在简历上的的项目从技术架构到源码都要做到足够了解,至少面试的时候不要被面试官问住了。亮点
准备一些自己的亮点,因为面试的问题你不可能每个都回答上来,但是在面试的过程中一定要有亮点,不然问你的一些问题都是回答的一般般,让面试官感觉不到你那方面比较擅长(你就会得到反馈,面试官说你还行,但是没有过~), 你可以准备几个点,每个点都保证可以吹上个半小时。另外一定要了解的很深入,一定要能够流畅的表达出来!练手
先找几家不太想去的公司(规模差不多但离你住的地方比较远等等原因。。)练练手,如果第一次面试就去心仪的公司面试,淘汰率会非常高。特别是实习生还没有面试过的,建议多面几家再去综合考虑去哪家,我见过太多我身边的朋友因为毕业着急找工作随便投简历,面试通过了就入职了,干了一两周就说不想去了,跑路又重新找,这样的话其实非常得不偿失,时间也花了也没找到心仪的工作。心态
最后就是你的心态了,心态很重要!!!面试不过很正常,不证明你不优秀,只是不适合,总结面试经验,为下一次做准备。像我第一次面的第一家公司问的很多问题都回答不上来,boss上写的招实习生,最后面试我的人尽问一些奇葩问题,前端不需要写页面,后端也不需要写接口,最后说公司需要中级前端,我目前只能是个初级前端,不符合公司要求。我就纳闷了招中级前端写招聘实习生???整个面试下来10分钟不到,到时我都快气炸了。也有点影响后面的面试,所以一定要有个好的心态面对面试结果。方便读者阅读我将面试题进行了个分类,这篇主要写跟vue和项目相关的面试题,因为我简历上写了三个项目,所以大部问题都是从项目开始切入的,有些记不住,回答的也不是太好。。。我会把网上的详细文章贴出来,读者更详细的学习。
Vue
实例从创建到销毁的过程,就是生命周期。
也就是:开始创建->初始化数据->编译模板->挂载dom
->数据更新重新渲染虚拟dom
->最后销毁。 这一系列的过程就是vue的生命周期。所以在mounted阶段真实的DOM就已经存在了。
data
都还没有进行初始化,还是一个undefined
状态data
已经有了,可以访问里面的数据和方法,el
还没有,也没有挂载dom
el
和数据对象都有了,只不过在挂载之前还是虚拟的dom
节点dom
上,可以通过对dom
操作来获取dom
节点dom
打补丁之前,适合在更新之前访问现有的dom
,比如手动移除已添加的事件监听器dom
重新渲染和打补丁之后调用,组成新的dom
已经更新,避免在这个钩子函数中操作数据,防止死循环。this
也能访问到实例,可以在这里对一些不用的定时器进行清除,解绑事件。总共有7种,当时是只回答了4种
参考这篇文章
v-text/v-html/v-for/v-show/v-if/v-else/v-cloak/v-bind/v-on/v-model/v-slot…
vue的指令还是得都记住的,这里是按照我的记忆方式排列的,大家可以有自己的记忆方式。
参考vue文档
v-show是css切换,v-if是完整的销毁和重新创建,如果频繁切换时用v-show,运行时较少改变用v-if
vuex是一个专门为vue.js开发的状态管理模式,每一个vuex应用核心就是store(仓库)。store基本上就是一个容器,它包含着你的应用中大部分的state(状态)
vuex
的状态存储是响应式的,当vue
组件中store中读取状态时候,若store
中的状态发生变化,那么相应的组件也会相应地得到高效更新。store
中的状态的唯一途径就是显示commit
(提交)mutation
,这样使得我们可以方便地跟踪每一个状态的变化。主要有以下几个模块:
Stroe
中获取数据,mapGetters
辅助函数仅仅是将store
中的getter
映射到计算属性。store
中状态的方法,且必须是同步函数。muatation
, 而不是直接变更状态,可以包含任意异步操作。store
拆分为多个sotre
且同时保存在单一的状态树中state
存储的数据如果页面刷新此时数据还会有吗?当时没想清楚就回答了有,面试官说没有让我回去可以试一下,其实过后我就知道是没有了,在项目中有遇到过这个问题。。。
项目地址:高仿小米商城,github地址感兴趣的朋友可以clone下来学习下,如果感觉不错的话可以欢迎大家点个start。
在这个项目中我用到了vuex来管理用户名和购物车数量,当时我的设想是用户即使没有登录也可以访问首页,当用户将商品加入购物车再让用户跳转到登录页,所以就存在这么一个问题,当用户登录之后我通过vuex来存储用户名和购物车数量,当用户跳转其他页面再回到首页的时候此时vuex中state
中的数据已经没有了导致用户名和购物车数量都为空,当时的解决方案是在app.vue中mounted
这个钩子通过COOKIE中有没有存储用户的id来判断用户是否登录,如果登录重新发送请求再通过dispatch
触发action
来提交mutation
中的方法重新存储用户名和购物车数量到state
中
v-model原理:我们在vue项目中主要使用v-model指令在表单 input、textarea、select、等表单元素上创建双向数据绑定, v-model本质上就是vue的语法糖,v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件:
text
和textarea
元素使用value属性和input事件checkbox
和radio
使用checked
属性和change事件slect
字段将value
作为prop
并将change作用事件举个栗子
本质上相当于这样
其实就是通过绑定一个something属性,通过监听input事件,当用户改变输入框数据的时候,
通过事件传递过来的事件对象中的target找到事件源,value属性表示事件源的值,从而实现双向数据绑定的效果
其他的实现可以参考文章v-model源码解析(超详细)
MVC
图示
流程
MVVM
图示
流程
两者的区别
概括起来就是,MVVM由MVC发展而来,通过在Model之上而在View之下增加一个非视觉的组件将来自Model的数据映射到View中。
因为组件是可以复用的,js里对象是引用关系,如果组件data是一个对象,那么子组件中的data属性值会互相污染,产生不必要的麻烦。所以一个组件中的data必须是一个函数,因此每个实例可以维护一份被返回对象独立的拷贝。也因为new Vue
的实例是不会被复用,所以不存在以上问题。官方文档讲的很详细,想要深入了解可以看下文档中的解释。
vue官方文档
遇到这个问题我是蒙的,说实话真本地没想过面实习会问到我异常处理问题。我当时只讲了
其实还有很多种,我连window.error
来捕获运行错误都没讲
回答这个问题的时候我没答好,讲到最后自己都没听明白,之间自己还做过笔记(可见复习的重要性,做过的笔记一定要多看,不然也就没有意义了)
COOKIE4K, Stroage5M
COOKIE有有效期的限制,而Storage没有,sessionStorage只在窗口关闭会消失
LocalStorage始终有效即使浏览器关闭也有,是存储在硬盘中的。存储位置: C:Users你的计算机名AppDataLocalGoogleChromeUser DataDefaultLocal Storageleveldb
sessionStorage不在不同的浏览器窗口共享,即使是同一个页面,LocalStorage在所有同源窗口中都是共享的,COOKIE也是在所以同源窗口共享。
COOKIE、LocalStorage 与 SessionStorage的区别在哪里?
HTTP网络状态码(STATUS) 根据状态码能够清楚的反映出当前交互的结果及原因
2xx状态码一般是前端人员的锅,5xx一般是后台人员的锅,学会看问题出在哪里很重要,对以后工作中的甩锅有很大帮助。
浏览器缓存也就是HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,缓存分为两种:
强制缓存
当浏览器向服务器发送请求的时候,服务器会将缓存规则放入HTTP响应的报文的HTTP头中和请求结果一起返回给浏览器,控制强制缓存的字段分别是Expires和Cache-Control,其中Cache-Conctrol的优先级比Expires高。
协商缓存
协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程
强制缓存优先于协商缓存进行,若强制缓存生效则直接使用缓存,若不生效则进行协商缓存,协商缓存由服务器决定是否使用缓存,若协商缓存失效,那么代表该请求的缓存失效,重新获取请求结果,再存入浏览器缓存中;生效则返回304,继续使用缓存
浏览器缓存机制
原生Ajax是根据 XMLHttpRequest
发HTTP请求,而axios是根据Ajax进行封装的插件,其内部利用Promise实现,很好的解决的异步请求回调地狱的问题。
后者的问题其实就是问Ajax发送请求的五个步骤,这个过于基础就不讲了。
GET
POST
这个问题要回答起来能回答半个小时,每个人回答的方向不一样。
我的回答是:HTTP为超文本传输协议,HTTPS为安全超文本传输协议,后者是前者的升级,相对比较安全,通过数据加密传输的方式,安全系数比较高,HTTPS也会作为网站的搜索权重指标,所以HTTPS的网站在排名中也更有优势。
我回答是不可以的,我也不知道是不是对的,百度了一圈也没有答案。。。有知道的大佬可以在评论区回答下。
网上有很多种,可以自己去搜,这里就不多讲了。
rem和em单位一样,都是一个相对单位,不同的是em是相对于元素的父元素
的font-size进行计算,rem是相对于根元素
html的font-size进行计算。
1em相当于当前元素父元素的font-size
举个栗子
<style>
.box {
font-size: 18px;
}
.box .children {
width: 2rem; // 相当于2 * 18 = 36px
}
style>
<div class="box">
<span class="children">里面span>
div>
常用命令
创建版本库:
- git clone
- git init
查看配置
git config -l // 查看全部
git conig --global -l // 查看仓库中人员名和邮箱
git config user.name xxx // 设置
git config user.email xxx // 设置
修改和提交
git status
git diff // 查看变更内容
git add .
git mv
git rm
git commmit -m
查看提交历史
git log
git log <file> // 查看该文件每次提交的记录
分支操作
git branch // 查看当前分支
git checkout -b // 添加一个新分支并切换过去
远程操作
git remote -v // 查看远程分支
git remote add <remoteURL> // 添加远程分支
最后说了下我管理库的方式:
首先我会在gitHub上创建一个仓库,为当前项目中每位开发人员取一个对应的分支,让其在对应的分支开发。
然后clone我这个仓库。
当队员需要向gitHub上传代码时,需要先将自己的代码同步到自己远程仓库对应的分支中,
再切换到要本地的主分支将自己本地开发的分支代码进行合并,如果有冲突先在本地解决,
最后再同步到远程的主分支
我当时只回答了这两点,其他的我也不知道。。。
对于这种题我回答的贼差,不敢误人子弟,这里分享一个错的文章
组件化页面:封装el-form
这个就看个人回答了,不同的项目遇到的问题也不一样。
对于这个问题我是蒙的,可能是因为我简历上写了很好的组件化开发思想吧(说实话当时的回答有点打脸),我是从代码方面回答的。
通过vue.extend,vue.component注册这种方式找到项目通用的模块,指定通用部分代码,props传值,并且通过slot来自由定制内容,然后创建vue文件。
对于这种问题网上也没有好的回答,欢迎大佬在下方评论交流。
我说下我的大概思路,首先分析需求:需要什么?
需要实现的功能
最后确定那些数据是需要外部传入就ok了。
在订单确认页面,使用自行封装dialog通过slot自由定制内容的方式来实现,新增、编辑、删除收货地址的对应元素,用户点击的不同实现对应功能
昨天居然接到HR说我通过面试了,给发了offer。希望自己能在这家公司快速成长。
博主也是自学的前端,能体会到自学路上那种时而迷茫时而充满希望的滋味,我在拿到这家offer的时候也面过很多家,也拿到通过几家小公司的面试,后面自己还是想去大一点的公司,所以也就一直在面试,希望和我一样自学的前端小伙伴能够坚持下去,加油!!!
如果你觉得我的文章对你挺有帮助,我想请你帮我两个小忙: