前言
前几天终于收到人生第一份面试通知，面试了深圳的一家创业型公司，查了一下这家公司还挺不错的，有很大的发展前景，面试官也很nice，不管面试结果如何，通过这次宝贵的面试机会也给我带来知识上的查漏补缺。
本来打算录下整个面试过程，带上了心爱的AirPods，开启了一波操作，面试完才发现一点儿声音都没录进去，当场裂开，查了下原因是因为戴上AirPods录屏就没声音，所以趁着刚面试完马上写下这篇面试总结。
面试题
自我介绍一下
balabala...
讲一下你做的项目
讲了项目的一些基本的功能，当时有点紧张，而且是电话面试，没有把功能讲得很全，还好我在简历提供了项目预览网址。
讲一下微信小程序配置文件的字段的意思
我记得简历上没写小程序，面试官突然就问起了小程序的内容。。当时的心情是what？
答：了解过mpvue但是没做过项目，不会原生小程序。对vue比较了解。
看来要好好系统的学习小程序了，刚好最近在M课网买了小程序课程，学起来！
谈谈你对vue单文件组件的理解
答：vue的单文件组件，即以.vue结尾的文件，有一个template标签，用来放页面的结构，script标签用来放js相关逻辑的内容，style标签用来放相关的样式，可以提供一个scoped属性防止样式污染。
网上的标准答案：单文件组件
谈谈对SPA单页面应用的理解
这个还真没想起来，网上查了一下
SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。 优点：
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染； 基于上面一点，SPA 相对对服务器压力小； 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：
初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载； 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理； SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。
vue绑定class的方式
答：通过用v-bind指定绑定class属性，可以用对象的方式也可以用数组的方式提供类名，一般用来切换样式，如某个条件为true时就添加这个类名样式。
官方文档：Class和Style绑定
v-if和v-show的区别
答：v-if是真正的条件渲染，v-show是渲染了，通过display为none控制。
谈谈你对虚拟DOM的理解
答：emmmmm...忘了
其实这个很久前看过，但是复习的时候没复习到。。。
可以看掘金大佬这篇：《深入剖析：Vue核心之虚拟DOM》
对vuex的理解
答：vuex通过state提供状态，mutations修改转态，actions异步函数也可以编写多个mutation一并提交，getters获取状态，相当于computed。
最近刚做了一个音乐web app，对vuex真的熟透于心啊！
官方文档：vuex
谈谈vue的单向数据流
这个概念我给忘了，其实就是父组件传递子组件，只能单向传递，子组件不能修改父组件传递过来的数据。。。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。子组件可以通过$emit派发一个自定义事件，父组件接收到后，有父组件修改。
vue中如何监听一个数组的变化
答：可以通过watch监听，当数组发生变化时，就会触发watch中对应变量的函数。
官方文档：watch侦听器
vue中key的作用
我听成字母k。。。问面试官是不是字母的k，他说是，当场懵了，后面就说没听过，面试完才想起来是key。。。
key一般跟v-for配合使用，还有vue的transition-group也需要绑定key。
key的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
讲一下vue的生命周期
答：vue的生命周期分为三个阶段，初始化、运行中、销毁。一个完整的生命周期，从开始创建、初始化数据、编译模板、挂载dom、渲染、更新、渲染、销毁
beforeCreate=>new Vue()，初始化事件和生命周期，然后就执行beforeCreate，此时数据还没有挂载，无法访问数据和dom，一般不做操作
created=>挂载数据，绑定事件触发，可以使用数据更新数据，但不会触发updated函数，一般用来做初始数据的获取
beforeMount=>render函数首次被调用，找实例或者组件对应的模板后触发，虚拟dom创建，准备渲染，这里也可以用来初始数据的获取，不会触发updated钩子
mounted=>渲染了真实dom，组件出现在页面中，但不保证所有子组件都被挂载，可以使用vm.$nextTick确保所有组件都被挂载
beforeUpdate=>当组件或实例的数据更改之后立马指向，一般不在这个钩子做什么事
updated=>当数据更新完后立即执行
beforeDestory=>当经过某种途径调用$destroy方法后，立即执行beforeDestroy，用来清除计时器、清除非指令绑定的事件等等
destoryed=>组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以
有了解过vue的ssr吗
答：emmmmm...没有。
然后问面试官什么是ssr，面试官说是一种服务端渲染，才想起来原来是NUXTJS，听过但是没用过唉。
Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
即：SSR大致的意思就是vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染。
面试官：那我来问一下基础吧。
心想还好之前怒刷了一遍红宝书和阮老师的ES6入门。
谈谈你对闭包的理解
答：闭包就是一个函数可以访问另外一个函数内部的变量。闭包的优点是可以延伸变量的作用范围
面试官：缺点呢。
答：容易造成内存泄漏，然后就讲了会造成内存泄漏的几种场景，定时器、DOM引用、全局变量。
说一下什么是原型和原型链
答：在js中，每个对象都有个prototype属性指向原型对象，balabala...，然后顺便讲了new的过程。
面试官：Object的原型对象指向什么
答：null
可以参考我写的这一篇：理解原型与原型链
css选择器的优先级
答：!important>内联样式>ID选择器>类选择器>标签选择器>继承
感觉回答得不是很好，其实还要考虑到优先级的计算。
网上标准答案：CSS选择器优先级
什么是bfc
答：BFC简称块级格式上下文，BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界；
触发BFC的条件是float不为none；overflow不为visible；position为absolute或fixed；
display为inline-block或table-cell、table-caption
BFC一般被用来清除浮动、避免某些元素被浮动元素覆盖、阻止外边距重叠
说说你对盒子模型的理解
答：有两种盒子模型，IE盒子模型和标准盒模型，IE盒模型通过box-sizing属性设置为border-box，IE盒模型width属性等于盒子的总宽度，标准盒模型宽度等于width+border+padding。
了解rem和em吗
答：rem是基于html的font-size，em基于父元素的font-size。
讲一下HTML5的新标签
答：语义化标签：header、footer、aritcle、nav、aside。
媒体标签：audio、video
如何实现垂直居中
答：1.flex布局，在主轴是横轴的情况下，设置侧轴align-items属性为center；2.设置绝对定位，top为50%、transform为translateY(-50%)，3.元素是行内块级元素, 使用display: inline-block, vertical-align: middle。
这个问题答得不好，回答得不全，也没考虑到兼容性问题。
回来查了一下掘金的文章，推荐这篇《16种方法实现水平居中垂直居中》
对数据结构和算法了解多吗
讲了只知道栈、堆、队列、列表。。其他的当时想不起来。
数据结构算法对我来说真是硬伤，最近也在努力的刷LeetCode。不过确实像修言大佬说的一样，前端学数据结构算法是为了应付面试。。。前端工程才是前端工程师应该关注的。
如何实现冒泡排序
冒泡排序也给忘了~我真的是菜到抠脚啊。
function BubbleSort(arr) {
const length = arr.length
for (let i = 0; i < length; i++) {
for (let j = 1; j < length - i; j++) {
if (arr[j] < arr[j - 1]) {
const temp = arr[j]
arr[j] = arr[j - 1]
arr[j - 1] = temp
}
}
}
return arr
}
讲一下js中的内置对象
答：基础类型：Number、String、Boolean、null、undefined
复杂类型：Array、Object
我写了一篇《js内置对象常见方法清单》
你还有什么问题想问的吗
问了一下公司的实习期和技术栈，没了。
面试官：这周内给你答复。
目前过了第一轮面试，还有三轮🤤，后续有新的题目我都会继续在这篇文章更新，谢谢大家
最后
总结一下这次面试，感觉这次的面试题问的范围不是很广，如前端安全、前端存储、浏览器缓存、前端性能、网络相关、ES6等方面的问题都没被问到，可能每个公司的侧重点都不一样吧hhh。然后是自己知识方面的欠缺，如排序、虚拟dom、小程序、ssr、数据结构算法，后续需要对这方面知识加强学习。
这是人生的第一次面试，也是对自己的一次查漏补缺，面试前参考了掘金其他小伙伴的面经总结，感觉大家都写得不错，等拿到心仪的offer之后，打算再写一篇面经总结。不过从目前看，很多招聘网站的公司都基本不招应届生了，趁着这段时间继续提升自己，争取2年内达到阿里P6以上！
当然也希望如果有公司能看上小弟我，提供一个面试机会，小弟感激不尽😭
最后附上最近做的一个移动端音乐web app项目
