2020前端面试题集-vue向

elegantYU 发布于

2020下半年并不顺利，产品被其他平台诉讼下架，于是公司解散了无收益且吃钱的技术团队。突发事件显然超出了我的预期计划，在边玩边玩边玩边看题了大半月后，开始踏上面试之路。

这里集合一下本人遇到的全部面试题，题目顺序按照面试流程和出现频率降序，若是有点名气的厂会加名称。

自我介绍

这环节的面试官一般分为两种情况：

  • 已看过简历了解情况后，通过自我介绍看个人总结能力和突出亮点

  • 未看简历，想直接获取个人技术栈等情况，选择问题

此时介绍并不建议将简历内容完整复述一遍，没有营养啊。尽量控制介绍时间在3分钟以内，我将这环节提炼出以下几点：

  • 个人技术栈

  • 杰出项目或处理过的最有成就感的问题(挑一二稍微描述下，后续面试官有兴趣会追问)

  • 工作中的软实力(促进团队协作、推动团队发展、带人经验、项目架构经验等)

  • 日常如何提升自我(可以是技术方面，可以是其他方面，主要看个人的学习能动性和学习方式)

  • 拿得出手的开源项目

以上挑3、4点介绍基本就ok了，尽量简洁，抓重点

基础

  1. js的event loop

    无论直接问或者拐弯问，总之基本必问 —— 字节、哈喽

    • 宏任务、微任务有哪些
    • 宏任务如何处理(每次执行几个)

  2. 如何处理跨域问题

    也是必问 —— 字节、美团

    • jsonp原理、优劣
      • img标签src能否使用
    • cors如何设置

  3. 深浅拷贝

    建议做到手写 —— 携程

    • 浅拷贝如何实现(es5, es6)
    • 深拷贝如何处理循环引用

  4. throttle && debounce

    建议手写

    • 原理，应用场景，手写

  5. call\apply\bind

    • 手动实现，区别

  6. css水平垂直居中布局

    也属于基本必考点 —— 字节、美团

  7. new 的实现原理

  8. this 的指向

  9. let、const、var

    • 什么是变量提升

  10. Promise

    建议根据A+原理手写

    • 原理实现
    • 与async区别
    • 外部try catch能否捕获异常
    • 扩展方法的意义(all\race\finally\any)

  11. Set\Map

    • 数据结构
    • 应用场景

  12. 浏览器渲染问题

  13. 数据隐式转换

    • 隐式转换如何触发(== + !…)
    • 类型转换的规则

  14. instanceof 原理

  15. 重绘重排

框架

  1. vue响应式原理

    必问的，建议多看源码。有些面试官会将其与双向绑定混淆，可以顺带一起说 —— 字节、美团、哈喽

    • 直接对data中数组的索引修改，是否会变化
    • 增删对象属性，是否会变化
    • 对数组类型的处理
    • 为什么不对数组做依赖收集

  2. vue的key有什么作用

    • 不加key有什么影响
    • 就地复用比重新创建性能高，如何选择

  3. vue diff算法如何处理

  4. 组件通信方式

    • 依赖注入的实现

  5. nextTick 原理

    • 如何实现在dom更新后执行(MutationObserver)
    • 在事件流中的执行位置

  6. computed与watch

    • 区别、取舍
    • computed的缓存机制
    • computed能否被赋值

  7. 虚拟dom

    • 原理，与原生dom区别

  8. keep-alive

    • 生命周期
    • 原理

  9. 父子组件渲染顺序

    • 生命周期执行顺序
    • 通过props传递的数据，在父组件哪个阶段请求

  10. vue-router

    • 常用的mode，如何实现
    • 浏览器回退按钮的事件
    • hash和history的优缺点，如何选择
    • 如何修改hash

  11. vuex

    • mutation与action区别

  12. react

    没看这方面的题，所以没让面试官问太多

    • react hooks优缺点
    • redux 与其他状态管理框架的比较

网络

字节对网络方面问的较多

  1. 导航栏输入内容点击回车后发生的事

  2. 请求响应头有哪些内容(字段)

  3. 缓存机制

  4. restful 了解

    建议从阮一峰的restful架构开始看，api代表表现层状态转换的方式

    • 如何设计restful规范的api
    • 请求方法如何使用
    • options方法的用途

  5. 前后端鉴权的方式有哪些

    • 如何理解jwt
    • cookie鉴权的优劣
    • 页面对不同角色的处理

  6. ssr服务端渲染

    • ssr与传统的jsp、php，同样是服务端出页面，有什么区别
    • 生命周期
    • 如何获取数据
    • 应用场景

其他

  1. 页面性能优化

  2. webpack优化

  3. babel 相关

    • 用途、原理
    • Object.assign()被babel处理后的语法
    • Promise被babel处理后的语法

  4. webpack相关

    • 由哪些模块构成
    • 常用的webpack插件有哪些
    • loader的作用、原理
    • css-loader和style-loader区别

  5. 图片格式的选择

    • webp兼容性如何解决

  6. express与koa的区别

    • 中间件如何调用
    • app.use 执行顺序
    • 如何选择

  7. 小程序

    • Taro 原理，遇到的坑点
    • 各平台小程序的区别
    • 小程序优化方案

  8. 移动端页面

    • 如何解决1px问题
    • rem布局与vw布局
    • click 300ms延迟问题
    • flex布局

  9. html2canvas

    • 如何解决生成复杂图片会阻塞主线程问题

  10. 对于用户输入内容如何过滤

  11. 如何设计一个完全解耦的组件

  12. 对一个项目的前端架构思路

  13. 项目中最困难的点，如何克服

  14. 最近学习的内容是什么

  15. react\vue\express\js等等的最近动向，更新内容

  16. 面试官会根据个人做过的项目询问要点，记得提前整理出项目的细节

笔试(包括算法)

薪资

说实话，并不会谈，都是根据目标薪资莽着要(很少计算)，导致劳资错过了几家offer