一次前端面试小结

上海某互联网公司的初级前端岗位面试小结，希望对你有所帮助。

面试过程

问：自我介绍以及平时是怎么学习前端的？
答：正常回答即可。
问：看了你写了一篇关于 Vue 和 React 的文章，请举例说明一下二者的差异？
答：
1. 组件：React组件即函数，在函数内部是JS部分，return 的是HTML部分；Vue我使用的是单文件组件，其由HTML模板、JS、CSS构成。
2. Props：React子组件通过作为函数参数传递进来的 props对象拿到父组件传递的外部属性，Vue 的子组件通过构造选项 props 拿到父组件传递的外部属性。
3. state：React 通过 useState 声明和初始化数据并拿到 state 和 setState，通过setState更新状态到视图，Vue 通过 data选项声明数据，修改数据直接更新到视图上。
问：讲讲为什么 Vue 修改数据可以直接更新到视图上？
答：Vue 会对在 data 选项里声明的属性通过 defineProperty 方法将属性修改为 getter和setter 类型，Vue 通过 getter和setter 类型监听数据的读取与写入，每当数据变动时 Vue 就会重新渲染组件。
问：现在如果有一个data数据 { a:123 } ，现在这个 a 被异步的更改为 456 ，现在要求当 a 变更为 456 执行一段代码请问怎么实现？
答：可以通过 Watch 选项监听数据 a 的变动，然后执行对应的代码。
问：这确实可行，如果不用 Watch 呢？
答：。。。
问：你想一想 Vue 的异步API
答：哦，可以用 nextTick() 方法去获取数据，然后判断 a 是否等于 456 再去执行对应代码。
问：Vuex用过吗？聊一聊你的理解。
答：Vuex是Vue项目的全局状态管理工具，它有几个核心概念分别是：store：存储状态的容器；state：状态；mutation：同步改变状态的方法；getter：store的计算属性；action：异步改变状态的方法；模块：将 store 进行模块化管理。
问：你对 ES6 有了解吗？聊聊 let 和 var 的区别。
答：
1. let 声明的变量在块级作用域内，而 var 声明的变量在函数作用域内。
2. let 不可以重复声明，而 var 可以重复声明。
3. let 不存在变量提升现象，而 var 存在变量提升。
  具体可以参考我先的文章：JavaScript中var let const的区别
  问：有如下代码，请写出控制台结果。
```
{
   var a = 1;
   let b = 2;
}
console.log(a)
console.log(b)
```
答：分别输出：1、报错
问：那吧console提上去呢？
```
console.log(a)
console.log(b)
{
   var a = 1;
   let b = 2;
}
```
答：undefined、报错
问：ES6 还有其他了解的吗？ Promise了解吗？
答：了解的。
问：阐述一下你对Promise的了解
答：（这里本人将Promise是什么、三种状态、回调函数里的resolve、reject的作用、以及三个实例方法.then .catch .finally 和两个静态方法 .all .race进行了阐述）具体的内容参考我写的这篇文章：JavaScript 异步解决方案 Promise 全解析
问：try catch 和 Promise 的 .catch 有什么区别？
答：try catch 也是用来捕获错误的，Promise 拥有错误冒泡功能，虽然.then返回的是一个新的对象，但是在.then后面.catch仍然可以捕获到最开始的那个Promise对象的错误。（我不确定这样回答是否正确，面试官也没说什么）
问：宏任务，微任务了解吗？
答：了解的（然后我画了张图，蓝色块表示宏任务队列，橙色表示微任务队列，执行顺序是先执行当前所在横行的同步任务，再执行所在横行的微任务，再执行下一横行的宏任务）

宏任务与微任务

问：Promise 返回的是宏任务还是微任务呢？
答：Promise 返回的是微任务？
问：Promise 为什么返回微任务。
答：Promise 表示异步操作的返回结果 -> 当浏览器拿到结果肯定想第一时间处理 -> 加入微任务队列比宏任务处理速度快 -> 所以加入微任务队列。
问：当前有一个父div 和子div，在子div 上有一个 button 绑定一个点击事件，当button 被点击请问发生了什么？
答：button被点击 -> 子组件事件触发 -> 父组件事件触发这是事件的冒泡机制
问：事件除了冒泡还有其他机制吗？
答：还有捕获机制，addEventListener默认是冒泡机制，可以通过将第三个参数改为true 更改为捕获。
问：你在Vue 项目和 React项目分别踩过的坑有哪些？（这个问题最好提前准备，我是现场想了一会再说的）
1. Vue 项目在 TS 开发中由于Vue2.0的模板内JS代码没有类型声明 -> 导致拿到的数据是 any 类型 -> 结论：Vue2.0目前对TS支持不好。
2. React 是函数式编程，当你的state是某个对象并且要更改其某个属性时，setState需要将就对象先用...展开，在更改对应属性值。
问：接着开始问项目相关的问题，你的UI组件项目popover组件的具体怎么实现的？简单的讲一下。
答：（这个回答根据具体项目而异，具体回答内容这里就不赘述了）
问：你项目中遇到的最棘手的问题是什么？
答：（这个问题最好提前准备，答案根据具体项目而异，也不赘述）

经验总结：

如果面试问题比较复杂，你可以先说：让我稍微想一想，不用急着回答。
有些问题最好提前准备一下，比如说：项目中最难的问题以及解决方案，遇到哪些坑等等。
基础知识还是十分重要的，面试官很多问题会基于你提到的概念再进行拓展，你最好对你说的每一个技术名词都有一定了解。