2020前端面试题集-vue向

自我介绍#

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

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

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

此时介绍并不建议将简历内容完整复述一遍，没有营养啊。尽量控制介绍时间在 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

• 什么是变量提升

9. Promise

   建议根据 A+原理手写

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

10. Set\Map

• 数据结构
• 应用场景

11. 浏览器渲染问题

• 渲染顺序
• defer\async 的区别，对应的加载时机
• prefetch\preload 区别，原理

12. 数据隐式转换

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

13. instanceof 原理

14. 重绘重排

框架#

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