【初 / 中级前端面经】中小型公司面试时都会问些什么?

前言

          本文主要记录面试过程中涉及到的问题，文中会有部分我在面试中的经历和我当时是怎么回答这个问题的，只是给大家提供 思路 ，绝非标准答案！

        为避免不必要的问题，题目将所属通过A、B、C的形式记录。

公司 A

        A 公司的这个岗位职称比较高，所以涉及到的一些原理层面的东西居多，而且面试官在提问的时候，会按照你回答的东西去问下一个问题。

1. ES6 的新特性
2. promise.all 的原理
3. webpack 跟 vite 的区别
4. vite 的优势
5. vue2 和 vue3 的区别
6. vue 双向绑定的原理
7. Vue 中 Compile 的实现原理
8. watch 实现原理
9. JS 中数据存放的位置
10. 栈和堆分别是什么
11. 什么是虚拟 dom
12. 虚拟 DOM 中 key 值的作用
13. 项目中用 webpack 做了哪些优化
14. tree shaking 的原理
15. eventloop 是什么
16. 什么是微任务和宏任务
17. 父子组件渲染过程
18. 父子组件销毁过程
19. 为什么 Vue 中 data 是一个函数而不是一个普通对象
20. 搭一个新项目的框架, 需要考虑哪些问题

 ES6 的新特性 ？

1. 新增 let 、const 两种变量的声明方式
2. 新增 数组、对象 的一些原生方法
3. 新增 三种数据类型 Set、Map、Symbol
4. 新增 解决回调地狱的处理方式 Promise
5. 新增 proxy 用于监听某个对象
6. 新增 箭头函数 用来解决 this 指向问题
7. 新增 解构赋值 用来获取对象 / 数组中的值
8. 新增 模板字符串 用来替换字符串拼接的方式
9. 新增 Class 也就是 JS 中类的概念
10. 新增拓展运算符用来展开对象 / 数组

阮一峰老师 ES6 入门教程详解

Promise.all 的原理 ？

原生 Promise.all 的实现

Webpack 和 Vite  的区别 ？

        对这两个知道倒是都知道，区别还真不太知道。

        区别1  ==> 编译时间

                Webpack 是将整个项目打包之后再启动一个开发服务器供我们访问开发

                Vite 直接启动一个开发服务器，在我们访问项目内的某个模块再对这个模块以及依赖模块进行打包

        区别2   ==> 热更新功能（HMR）

                Webpack 某个模块内容后是将该模块所有依赖重新编译

                Vite 某个模块内容改变时，让浏览器重新去请求该模块

Vue2 和 Vue3 的区别 ？

        这个是目前比较常问到的一个问题！！！！几乎都必问

1. 双向绑定原理的变化
2. 生命周期的变化
3. Composition API
4. 打包工具由 Webpack 变更为 Vite
5. Diff 算法优化

Vue2 双向绑定 的原理 ？

        这个大家都知道，主要就是把Vue双向绑定的过程说出来，所以在这里也不详细写了。

Vue2 中 Compile 的实现原理 ？

实现Compile

Vue中  Watch 的实现原理？

        这个当时懵了，不知道是啥了。后面查询的时候发现，其实就是数据监听通知订阅者模式

JS中数据的 存放位置 ？

        在JS中数据的存放位置分为 栈和堆

        基本类型的数据大小是固定的所以是存放在栈中

        引用类型的大小是不确定的，所以在存放方面会有所不同，它把数据存放在堆中，而指向这个堆中的指针是存放在栈中的，因为指针的大小是固定的

JS中的 栈 和 堆 分别是什么？

        栈是用来存放基本类型的数据比如 Boolean、Number、String...

        堆是用来存放引用类型的数据

什么是 虚拟 DOM  ？

        Virtual DOM 是 DOM 节点在 JavaScript 中的一种抽象数据结构，之所以需要虚拟 DOM，是因为浏览器中操作 DOM 的代价比较昂贵，频繁操作 DOM 会产生性能问题。

        虚拟 DOM 的作用是在每一次响应式数据发生变化引起页面重渲染时，Vue 对比更新前后的虚拟 DOM，匹配找出尽可能少的需要更新的真实 DOM，从而达到提升性能的目的。

        虚拟 DOM 的实现原理主要包括以下 3 部分：

• 用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
• diff 算法 — 比较两棵虚拟 DOM 树的差异；
• pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

虚拟 DOM 中 key 值的作用？

        key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】的差异比较。

项目中用 webpack 做了哪些优化？

1. Tree shaking
2. 关闭 sourceMap
3. 代码压缩
4. Compress - webpack-plugin打包优化
5. 多进程打包
6. CDN 加载依赖

tree shaking 的原理？

        这个真不知道...敬请留言答复

eventloop 是什么？

        JS并非多线程的语言，因此JS中的eventloop是为了不让JS的异步操作阻塞下面代码的运行，会将I/O的操作放入消息队列中等待执行完成的回调，然后会执行主线程中的回调方法，这也是实现异步操作的前提，触发I/O的操作有延时器，定时器，异步操作

什么是 微任务 和 宏任务 ？

        在JS中的任务分为同步任务和异步任务，而异步任务又分为微任务和宏任务，微任务和宏任务的执行机制不同，当主线程中的同步任务执行完成后，会去执行微任务，然后去执行宏任务。

父子 组件渲染过程 ？

        父beforeCreate  -> 父 created  -> 父 beforeMount  -> 子 beforeCreate  -> 子 created  -> 子 beforeMount  -> 子 mounted  -> 父 mounted

父子 组件销毁过程 ？

        父 beforeDestroy  -> 子 beforeDestroy  -> 子 destroyed  -> 父 destroyed

为什么 Vue 中 data 是一个函数而不是一个普通对象？

        因为在 Vue 中的组件化开发中如果data是一个普通对象的话，会造成相同组件中的变量污染问题，我们使用函数暴露出一个对象的时候，这个对象只在组件内部可以访问到，只供当前组件使用。不会有变量/数据污染的问题。

搭一个新项目的框架, 需要考虑哪些问题？

        这个考虑的方面也比较多，个人理解可能也不同。就个人理解而言：从开发阶段到代码发布生产环境，包含了以下几个内容：

• 开发
• 构建
• 测试
• 部署
• 性能
• 规范

公司B

这家公司的面试过程就很随和，也没有问八股文类的问题。

1. Vue路由的模式
2. Vue路由模式的区别
3. Vue路由的传参方式
4. 如何让 params 的参数长久保存下去
5. Vue路由的全局守卫
6. for 循环中 key 的作用
7. Vue父子传参的方式
8. Vuex 的五大模块
9. Vuex 的modal 模块是什么
10. Watch 和 Computed 的区别
11. ES6 的新特性
12. ES6 中箭头函数的 this 指向
13. ES6 中 promise的用法
14. ES6 中 promise 有哪些静态方法
15. Vue2 和 Vue3 的区别

Vue路由的模式？

        主要分为 hash 和history模式

Vue路由模式的区别？

  Hash 模式

1. url中有#号，
2. #后面的值不会被包含在http请求中，
3. 改变hash值不会引起页面的重新加载。会触发hashChange事件，会被浏览器记录下来，可以使用浏览器的前进和后退。
4. 是根据HashHistory.push实现的

  History 模式        

1. url不带参数
2. url中没有#号
3. history 模式需要后端配合将所有访问都指向 index.html，否则用户刷新页面，会导致 404 错误
4. 是根据history实现的

Vue路由的传参方式？

   Vue路由的传参方式分为 params 和 query 方式

        在params 中传递的参数会保存在浏览器内存中，刷新页面后消失

        在 query 中传递的参数会保存在 url 中，刷新页面后仍可用

如何让 params 的参数长久保存下去？

        放在本地存储中，页面刷新时读取内容。

Vue路由的全局守卫？

        beforeEach  在路由跳转前触发

        afterEach   在路由跳转后触发

for 循环中 key 的作用？

        在公司A中已解答。

Vue父子传参的方式？

1. V-bind + emit
2. Vuex
3. Bus
4. $root / $parent / $children
5. $attrs + $listener
6. Provide + inject

Vuex 的五大模块？

        State：存放数据

        Getter: 获取数据

        Mutation: 修改state中的内容

        Actions: 调用mutation中的方法修改state的数据

        modules: 将Vuex分成多个仓库存储不同模块的数据

Vuex 的modules 模块是什么？

        将Vuex分成多个仓库存储不同模块的数据

Watch 和 Computed 的区别？

        使用场景不同

        Watch 用于监听一个属性的变化并触发回调函数

        Computed 依赖于一个或多个属性并根据这些属性生成新的数据, Computed有缓存, 多次调用时,当依赖的值没有变化时还是使用之前的缓存值

ES6 的新特性？

        同 公司A第一题。

ES6 中箭头函数的 this 指向？

        在ES6 中箭头函数的 this 指向外部作用域

ES6 中 promise的用法？

        使用 new 关键字声明一个Promise对象, Promise对象接收一个回调函数作为参数, 手动调用resolve / reject，可以让这个Promise对象的状态变为成功/失败的状态，在then/catch中可以获取到相应的结果。

ES6 中 promise 有哪些静态方法？

        Promise.all

        Promise.resolve

        Promise.race

        Promise.allSettled

Vue2 和 Vue3 的区别？

        同公司A第5题

公司 C

这家公司问的移动端和基础的东西比较多

1. CSS3 的常用属性
2. H5 的新增标签
3. ES6 的特性
4. canvas 的用法
5. ES6 中新增的数组方法
6. reduce 方法的使用
7. 数组中 some 和 every 的区别
8. filter 和 map 的相关用法
9. CSS3 的选择器
10. Object.defineProperty 和 proxy 的区别
11. v-for 和 v-if 的哪个优先级高
12. v-for 和 v-if 会有什么问题, 如何处理
13. Vue 中组件传值的方式
14. webpack 和 vite 的区别
15. 什么是回流和重绘
16. 什么是 diff 算法
17. Vue 是如何实现依赖数据更新视图的
18. flex 和 grid 布局的区别
19. 什么是 flex 布局
20. 什么是 grid 布局
21. H5 中 rem 和 em 的计算方式
22. 移动端中的响应式布局的几种方式
23. 为什么 vite 比 webpack 加载的更快

 CSS3  的常用属性？

        新增了元素选择、Transition、transform、Keyframes、Flex、Grid、@media、Box-shadow、Text-shadow、渐变...

 H5 的新增标签？

        新增语义化标签Header、footer等

        新增了媒体元素Video、Audio

        新增了画布Canvas

        拓展了input的type类型,date、email、 url、 search、 range、month、color、number

 CANVAS  的用法？

HTML5 Canvas 画布

 ES6  中新增的数组方法？

        Filter、forEach、Map、some、every、isArray、at、fill、flat、Array.from、reduce...

 reduce 方法  的是如何使用的？

        Reduce方法接受两个参数回调函数和迭代的初始值, 可以在回调函数中通过形参的方式获取到这个初始值， 在每次循环的时候并对这个初始值处理, 最后返回这个初始值。

数组中 some 和 every 的区别

        every是当数组中每一项都满足条件时整体返回一个Boolean值

        Some 当数组中有一项满足条件时整体返回一个Boolean值
filter 和 map 的相关用法

        他们都是循环的一种方式, 参数接收一个回调函数, 用于对数据的处理，都会基于当前数组返回一个新数组，都需要在回调函数中 return 出来一个内容。

        Filter根据筛选条件返回满足条件的数据

        Map 根据当前数组生成一个新的数组
CSS3 的选择器

CSS3选择器-30个
Object.defineProperty 和 proxy 的区别

        Object.deinfeProperty

                是监听对象中的某一个属性

                只提供了setter 和getter方法

                对于数组的某些操作也监听不到

        Proxy

                是监听整个对象的变化

                提供了丰富的API用于监听数据的变化

                可以监听到数组的变化

v-for 和 v-if  的哪个优先级高

        当 vue 处理指令时，v-fo r比 v-if 具有更高的优先级，通过 v-if 移动到容器元素，不会再重复遍历列表中的每个值，取而代之的是，我们只检查它一次，且不会再 v-if 为否的时候运行 v-for。
v-for 和 v-if 会有什么问题, 如何处理

        永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）

        1. 如果避免出现这种情况，则在外层嵌套 template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行 v-for 循环

        2. 如果条件出现在循环内部，可通过计算属性 computed 提前过滤掉那些不需要显示的项
Vue 中组件传值的方式

        同公司B 第 7 题
webpack 和 vite 的区别

        同公司B 第 3 题
什么是回流和重绘

        三种情况，会导致网页重新渲染。

        1. 修改DOM；

        2. 修改样式表；

        3. 用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）。

        重新渲染，就需要重新生成布局和重新绘制。前者叫做"重排"（reflow），后者叫做"重绘"（repaint）。需要注意的是，"重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。但是，"重排"必然导致"重绘"，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。
什么是 diff 算法

        这个就不太知道了...
Vue 是如何实现依赖数据更新视图的

        简单的说就是Observer + Compile 去处理的, 感兴趣的同学可以去看一下vue的源码。
flex 和 grid 布局的区别

        Flexbox 是一维布局系统，适合做局部布局，比如导航栏组件。

        Grid 是二维布局系统，通常用于整个页面的规划。

        二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局，但是没有 Grid 强大和灵活。二者结合使用更加轻松。

        flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。
什么是 flex 布局
Flex 布局教程：语法篇

什么是 grid 布局
CSS Grid 网格布局教程

H5 中 rem 和 em 的计算方式

        Rem 是根据根元素的 font-size计算的

        Em 是根据父元素的 font-size计算的
移动端中的 响应式布局 的几种方式

        Flex布局

        Rem

        栅格布局

        @media

        在文章的结尾就是大家对自己的项目一定要了解，虽然可能确实是自己做的，但是时间长了会忘，建议面试之前再把自己的项目好好看一下，大多数公司还是会看你简历上面写的内容去拓展性的问你相应的问题，这个答不上来大概率会让面试官觉得你项目经历是编的，或者不是自己写的，从而扣分。

最后祝大家都能找到满意的工作！！！