前端面试要点

Posted 2023-03-09

想要通过前端面试顺利进入一线大厂成就高薪前端梦。那么首先，我们得知道前端面试中，社招和校招究竟有啥区别？

对于前端开发来说，如果说社招更看重对前端技术体系的深入理解，以及解决问题的能力话，那校招更看重的其实是基本功和学习能力（或者说是潜力）。

但其实，无论是社招还是校招，面试的时候都会问到一些曾经操作过的项目，尤其是大厂，或者热门高薪部门，面试官除必问的技术经验外，也会对技术深度进行一个基础的考核，那在这种情况下如何hold住大厂面试呢？

前端面试三要素：简历、个人介绍、技术能力。下面，就来分别聊一聊。

1、简历筛选关：

HR一般会去看简历中所提的技术栈是否匹配，怎么看呢？我们可以抓住简历中的技术名词，一般来说如果一点技术名词都没有提到，那么大概有以下几种可能：很水、很牛但概率很小、不会写简历。所以，一部分人可能会因为简历的问题没有了面试机会，这点是需要非常注意的。

2、个人介绍关：

通过了简历筛选阶段，就真正到了面试环节。这时候一定要准备好一段最多3分钟的个人介绍。请注意，最多3分钟！言简意赅的说明自己的工作时间，擅长技术栈和自己的工作预期。

3、项目经验表达：

对前端开发学习者而言，JS并不陌生，但大厂的JS面试题却总是显得很“陌生”，怎么样能够真正做到深入理解与高级应用？这不仅是面试过程中对前端求职者的要求，也是大多数前端开发者的痛点。

大厂面试中，面试官除了关注你的项目经验外，还往往喜欢和面试者深入探讨前端某些技术领域成体系的前端知识。比如：模块化、异步解决方案、网络、框架及原理、线程等，但在与面试官的正面battle中，求职者总会败下阵来。

所以，建议大家在Web前端面试前一定要注重这三个方面的内容。注重了这些想找找到一份适合的Web前端开发工作并不是难事。

参考技术A

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就是为了减少耦合，现在这么用，和组件化的初衷相背
复制代码