记5.27第一次面试，附题目

前言

前几天终于收到人生第一份面试通知，面试了深圳的一家创业型公司，查了一下这家公司还挺不错的，有很大的发展前景，面试官也很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 片断直接返回给客户端这个过程就叫作服务端渲染。

nuxtjs中文官网

面试官：那我来问一下基础吧。

心想还好以前怒刷了一遍红宝书和阮老师的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的新标签

答：语义化标签：

媒体标签：

如何实现垂直居中

答：1.flow布局，在主轴是横轴的状况下，设置侧轴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项目