长文预警，本文由面试题+感想两部分组成，可以挑着看

---

长沙亚信，无笔试、手写题、计算机网络，只有一面（现场），面试过程半小时，第二天就通知我过了（本人大三下）

面试题（css+js+vue）

css部分

页面常用布局有哪些？

• 这个点可以引申问一堆东西

float

问布局有哪些的时候没答这个，值得注意别漏了

• float造成什么问题？

  • 父元素坍塌（子元素脱离了文档流）

• 怎么解决？

  这里只举例三个，其实还有很多方法

  • 父元素设定高度
  • 父元素设置overflow: hidden
  • 消除浮动（div + clear: both）

position

• 哪些布局？
  • static、relative、absolute、fixed、sticky（容易被忽视）
  • sticky是粘性布局：相对最近的拥有 “滚动机制” 的父元素定位
• 哪些脱离文档流
  • absolute、fixed。值得注意，relative虽然看上去离开了本来的位置，但其实还是处于文档流，可以理解为物体和阴影的关系，阴影依然处于文档流中

flex

属性较多，当时我也没说出几个

可以参考阮一峰大佬的Flex 布局教程

• 主轴、交叉轴
• 容器属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
• 项目属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self
• 一个父元素包裹两个子元素，左边固定大小，右边自适应怎么实现？
  • 右边设置flex: 1

css3有哪些技术？

挺多的，挑会的讲，不然容易被问到盲区

• 渐变
• 圆角（边框/元素）
• 2D、3D转换
• 过渡
• 动画
• 弹性盒子
• …

怪异盒子了解吗？

可以参考css盒模型

• css 盒模型本质上是一个盒子，封装 html 元素，它包括外边距（margin）、边框（border）、内边距（padding）、内容（content）
• css盒模型有两种：标准模型+IE模型

---

js部分

对es6有多少了解?

• let、const
• 箭头函数（结合 this ）
• 类（class）
• 模块
• async、await
• 模块
• 新增的方法（对象、数组等）
• …

let和var的区别

首先得说到var的变量提升，可以参考let和var的区别

当时我就是没先答变量提升，被面试官把方向拉回来

• var在全局定义会给全局对象（window）增加属性
• 重复声明
• 暂时性死区
• 作用域

async结合promise如何使用

知识盲区，分开我知道是干嘛，让我结合使用我就有点摸不清了

复盘后想想应该就是问 acync 是如何使用的，因为它本身就返回 promise 对象

• 在 async 函数中返回promise对象，返回值可调用then、catch、finally等方法
• 无论是否用 await 返回/返回一个明显的 promise 对象，async 函数都是返回promise对象

解释下闭包

没问太深，简单叙述了下概念就过了，以下两种说法我都说了（可参考闭包详解）

1. 一个可以调用其他函数里东西的函数
2. 一个函数及其词法作用域的引用的组合（MDN）

原型/原型链

当时考官一时不知问什么，让我自己挑个点讲，我挑了这个（可参考原型/原型链）

毕竟原型/闭包是重点知识，当时觉得说出来不掉价

• 我们创建的每一个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象（这个对象是 “原型对象”）
• 每个对象都有一个对象原型，对象以其原型为模板，从原型继承方法和属性，而原型对象也可能有原型，以此类推，形成了一个原型链。

解释下bind、this、call如何使用

浅谈了三者区别和用法就过去了

大厂可能会问实现甚至手写，可参考手写call、apply、bind

• call、apply作用差不多，只是前者可以接收多个参数，后者接收的参数都传入一个参数数组
• bind会返回一个函数（不执行），而call、apply则返回函数的执行结果

es6的类（class）和以前实现类的方法有什么区别

考官意思应该是想问 class 是不是新产生的东西，毕竟以前的类是靠函数实现，继承靠原型/原型链

• class 其实只是语法糖，便于书写/理解/维护等，它内部还是基于以前的原型/原型链实现的

vue部分

vue常用指令

问这个引申出后面了两道题

• v-if/else、v-on、v-bind、v-show、v-model、v-for

v-for 为什么要加key

知识盲区，随便答了下 “给每一项加名称，方便搜索”

• key 类似于给每一项命名。当某一项被修改时可以用key去判断是否被修改，从而只重新渲染这一项，而不用渲染所有项
• 这里可能引申出个问题：为什么不用 index 作 key ？
  • 当某项被删除或者位置改变时，index 会重新计算，使得 key 的唯一性无法保证
  • 举例：比如一个列表有三项，第二项被删除，第三项变成了第二项，本来它的 index 为3，现在为 2 了

v-if 和 v-show 的区别

• v-if 只选择真的节点渲染到som树，v-show 则将所有节点渲染，只展示为真的节点
• 性能问题：如果需要经常切换节点，用 v-show，v-if 的话会重构dom树，消耗性能

v-model 如何实现双向绑定（自定义组件）

当时答了数据劫持+发布订阅模式，考官又强调了是自定义组件，vue 自身的方法

• 组件的model选项，可参考 vue 官网

作用域插槽

知识盲区，完全没印象

• 语法：v-slot
• 作用域插槽区别于普通插槽的本质：作用域插槽可以拿到子组件 props

组件之间如何传值

父子组件间常规回答即可，兄弟组件间范围较广，当时我只说了个通过函数，考官给我补充了几个

• 兄弟传值
  • 有父子关系，自定义事件，调用$emit
  • vuex 状态管理（可以参考l理解vuex的来龙去脉）
  • bus总线

生命周期钩子函数列举、实现原理

我先是答生命周期流程，从 new Vue 开始，后来考官打断说钩子函数怎么实现的，我当时以为他意思是钩子函数代码怎么编写的，说不会就下一个了

后来复盘思索了下他意思应该是让我用钩子函数来描述生命周期的各阶段

computed 和 watch 的区别

傻了，watch 没有仔细了解过，情急之下联想观察者模式蒙了个答案，说它是观测数据变化的，蒙对了！

• computed
  • 计算属性
  • 有缓存
  • 不支持异步
• watch
  • 监听器
  • 不支持缓存
  • 监听的函数接收两个参数
  • 支持异步

watch如何监听深层次变化（考官提示，vue本身提供的属性）

• deep: true即可（显然我没答出来，这鬼东西没法蒙啊！）

vue-router两种模式

知识盲区

• hash、history两种模式，通过 mode 参数选择模式
• url的hash
  • hash即#，代表网页中的一个位置
  • 改变#右边的值相当于跳转到网页的一部分，不会对整个页面刷新
• html5 新增的history

解释下keep-alive

知识盲区

• keep-alive：要求其中只有一个组件被渲染
  • 包裹动态组件时，会缓存不活动的实例，而不是销毁，且自身不渲染 dom，也不出现在组件的父组件链中
  • 当组件被切换，activated 和 deactivated 两个生命周期钩子会被对应执行

闲聊

组件库用过吗

• 考官提到了 element-ui，并说公司有自己的组件库

前端架构

• 虽然没问 webpack 等打包工具，但他言语之中是建议我了解下的，还有 ts、node、react 等知识

感想

• 可能是因为才大三下，问的内容都是偏基础的，而且只问了css、js、vue，没有牵涉到计算机网络、手写题、算法什么的，感觉都还说的上来

• 面试地点是公司的一个休息区，坐在沙发上面对面交流

• 回答方面的话，概括性的回答完考官也没往深了问，甚至有些简单的知识点考官就提了几句，我说我知道，刚准备细说一下他就直接跳过问下一个了

• 考官拿了个（我怀疑是）问题本来考我，挺平易近人的，整个面试过程都很友好，最后我问了下他觉得我答得如何，他说还不错

• 要说到紧张的话，还是有的，毕竟是第一次正式面试。虽然当时大部分都可以答上来，但越到后面越不由自主的紧张，说不上来的紧张，自己调整了下才能以平稳的语气继续回答问题

• 复盘后，发现自己 vue 方面的知识还是太欠缺了

如果觉得对你有帮助的话，点个赞呗~

反正发文又不赚钱，交个朋友呗~

如需转载，请注明出处foolBirdd