如题所述
想要通过前端面试顺利进入一线大厂成就高薪前端梦。那么首先,我们得知道前端面试中,社招和校招究竟有啥区别?
对于前端开发来说,如果说社招更看重对前端技术体系的深入理解,以及解决问题的能力话,那校招更看重的其实是基本功和学习能力(或者说是潜力)。
但其实,无论是社招还是校招,面试的时候都会问到一些曾经操作过的项目,尤其是大厂,或者热门高薪部门,面试官除必问的技术经验外,也会对技术深度进行一个基础的考核,那在这种情况下如何hold住大厂面试呢?
前端面试三要素:简历、个人介绍、技术能力。下面,就来分别聊一聊。
1、简历筛选关:
HR一般会去看简历中所提的技术栈是否匹配,怎么看呢?我们可以抓住简历中的技术名词,一般来说如果一点技术名词都没有提到,那么大概有以下几种可能:很水、很牛但概率很小、不会写简历。所以,一部分人可能会因为简历的问题没有了面试机会,这点是需要非常注意的。
2、个人介绍关:
通过了简历筛选阶段,就真正到了面试环节。这时候一定要准备好一段最多3分钟的个人介绍。请注意,最多3分钟!言简意赅的说明自己的工作时间,擅长技术栈和自己的工作预期。
3、项目经验表达:
对前端开发学习者而言,JS并不陌生,但大厂的JS面试题却总是显得很“陌生”,怎么样能够真正做到深入理解与高级应用?这不仅是面试过程中对前端求职者的要求,也是大多数前端开发者的痛点。
大厂面试中,面试官除了关注你的项目经验外,还往往喜欢和面试者深入探讨前端某些技术领域成体系的前端知识。比如:模块化、异步解决方案、网络、框架及原理、线程等,但在与面试官的正面battle中,求职者总会败下阵来。
所以,建议大家在Web前端面试前一定要注重这三个方面的内容。注重了这些想找找到一份适合的Web前端开发工作并不是难事。
Vue面试题,React面试题,JS面试题,HTTP面试题,工程化面试题,CSS面试题,算法面试题,大厂面试题,高频面试题都需要刷刷。
v-if和v-show区别
当条件不成立时,v-if不会渲染DOM元素,v-show操作的是样式(display)
v-if 适用于在运行时很少改变条件,不需要频繁切换条件的场景;
v-show 则适用于需要非常频繁切换条件的场景。
为什么 v-for 和 v-if 不建议用在一起
当 v-for 和 v-if 处于同一个节点时,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大,而真正要展示的数据很少时,这将造成很大的性能浪费
虚拟DOM树
组件中的data为什么是一个函数
一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。
如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。
事件 事件冒泡
性能优化
vue和小程序区别
null和undefined
1.null 表示一个值被定义了,定义为“空值”;undefined 表示根本不存在定义。
2.设置一个值为 null 是合理的;设置一个值为 null 是合理的。
Vue事件绑定原理是什么
原生事件绑定是通过addEventListener绑定给真实元素的,组件事件绑定是通过Vue自定义的$on实现的。
route 和router的区别
router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,例如history对象。。。经常用的跳转链接就可以用this.$router.push,和router-link跳转一样
route相当于当前正在跳转的路由对象,可以从里面获取name,path,params,query等
父子传参的方式
父向子传值props
子向父传参 emitemitemiton
v-model 双向数据绑定原理
v-model是用来在表单控件或者组件上创建双向绑定的
他的本质是v-bind和v-on的语法糖
在一个组件上使用v-model,默认会为组件绑定名为value的prop和名为input的事件
cookies,sessionStorage和localStorage的区别?
共同点:都是保存在浏览器端,且是同源的。
区别:cookies是为了标识用户身份而存储在用户本地终端上的数据,始终在同源http请求中携带,即cookies在浏览器和服务器间来回传递,而sessionstorage和localstorage不会自动把数据发给服务器,仅在本地保存。
存储大小的限制不同。cookie保存的数据很小,不能超过4k,而sessionstorage和localstorage保存的数据大,可达到5M。
数据的有效期不同。cookie在设置的cookie过期时间之前一直有效,即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效,窗口和浏览器关闭也一直保存,用作长久数据保存。
作用域不同。cookie在所有的同源窗口都是共享;sessionstorage不在不同的浏览器共享,即使同一页面;localstorage在所有同源窗口都是共享.
响应式/兼容
对响应式布局的看法
响应式布局有缺点也有优点。优点:面对不同分辨率设备,灵活性强,能够快捷地解决设备显示适应问题。
缺点:兼容各种设备时所需工作量大、效率低下、代码累赘,会隐藏无用的元素,加载时间延长,
其实这是一种折中性质的十设计解决方案,由于多方面元素影响而达不到最佳效果,
在一定程度上改变了网站原有的布局结构,会出现用户混淆的情况。复制代码
PC端页面需要兼容那些浏览器
浏览器不断更新,人们所熟知所使用的浏览器已不再是电脑自带的浏览器,所以在设计并完成PC端的页面时,要尽可能考虑更多的浏览器兼容性问题。
那浏览器大致可以分为IE内核浏览器和非IE内核浏览器。
IE内核浏览器:360,傲游、搜狗、世界之窗、腾讯TT
非IE内核浏览器:Firefox、Opera、Safari、Chrome
一般情况下主要考虑兼容性问题的浏览器是:IE6、IE7、IE8、Firefox5+、Safari、Chrome等浏览器
vuex
关于vuex的面试题网上的比较多,仅作参考
1、有哪几种属性
有 5 种,分别是 state、getter、mutation、action、module
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex
2、vuex 的 store 特性是什么
(1) vuex 就是一个仓库,仓库里放了很多对象。其中 state 就是数据源存放地,对应于一般 vue 对象里面的 data
(2) state 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生更新
(3) 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性
3、 vuex 的 getter 特性是什么
(1) getter 可以对 state 进行计算操作,它就是 store 的计算属性
(2) 虽然在组件内也可以做计算属性,但是 getters 可以在多给件之间复用
(3) 如果一个状态只在一个组件内使用,是可以不用 getters
4、vuex 的 mutation 特性是什么
action 类似于 muation, 不同在于:action 提交的是 mutation,而不是直接变更状态
action 可以包含任意异步操作
5、vue 中 ajax 请求代码应该写在组件的methods中还是vuex 的action中
如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 vuex 的 state 里
如果被其他地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回
6、不用 vuex 会带来什么问题
可维护性会下降,你要修改数据,你得维护3个地方
可读性下降,因为一个组件里的数据,你根本就看不出来是从哪里来的
增加耦合,大量的上传派发,会让耦合性大大的增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背
复制代码