最近参加了两场甲方的现场面试，下面是第一场，主要问的是CSS相关
因为准备不充分惨遭当场Pass ；23333333
诸位应该都比较熟悉，可以参考下
1.垂直，水平居中
面试最常见老题了，二话不说盘它...
1.利用 `flex` 布局
/* 无需知道被居中元素的宽高 */
.container {
display: flex;
align-items: center;
justify-content: center;
}
2.子元素是单行文本
设置父元素的 text-align 和 line-height = height
.container {
height: 100px;
line-height: 100px;
text-align: center;
}
3.利用 `absolute` + `transform`
/* 无需知道被居中元素的宽高 */
/* 设置父元素非 `static` 定位 */
.container {
position: relative;
}
/* 子元素绝对定位，使用 translate的好处是无需知道子元素的宽高 */
/* 如果知道宽高，也可以使用 margin 设置 */
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
4.利用 `grid` 布局
/* 无需知道被居中元素的宽高 */
.container {
display: grid;
}
.box {
justify-self: center;
align-self: center;
}
5.利用绝对定位和 `margin:auto`
/* 无需知道被居中元素的宽高 */
.container {
position: relative;
}
.box {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
2.事件委托？怎么用
在javaScript中，添加到页面上的事件处理程序的数量，将直接关系到页面的整体运行性能。
<li>标签的数量很大时，循环为每个子元素添加事件，绝非好方法。
有一种优雅的方法，就是事件委托。
使用事件委托只为<ul>元素添加一个onclick事件处理程序。
因为有事件冒泡机制，单击每个<li>标签时，都会被这个函数处理。
3.怎么控制台debugger
Debugger for Chrome插件或者直接打断点
4.target和currentTarget
-
target：触发事件的元素。
currentTarget：事件绑定的元素。 -
两者在没有冒泡的情况下，是一样的值，但在用了事件委托的情况下，就不一样了；
-
currentTarget始终是监听事件者，而target是事件的真正发出者。
5.前端工程化
模块化、组件化、规范化、自动化 （随意拓展）
工具： webpack，grunt，node，gulp....
6.vue UI组件
常用的element-ui,iview,vant,antD,mint-ui.....
7.vue的实现绑定数据原理
大家都知道vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，具体分为Observer，Watcher和Compile;
observer用来实现对每个vue中的data中定义的属性循环用Object.defineProperty()实现数据劫持，以便利用其中的setter和getter，
然后通知订阅者，订阅者会触发它的update方法，对视图进行更新;
Compile的目的就是解析各种指令称真正的html，而Watcher订阅者作为Observer和Compile之间通信的桥梁，
待属性变动通知时，能调用自身的update()方法，并触发Compile中绑定的回调。
8.防抖和节流
防抖和节流应该属于性能优化，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。
- 防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零；对于短时间内连续触发的事件（如滚动条的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。lg: 监听浏览器窗口的
resize事件。 - 节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁；让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活。如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。lg: 下拉加载更多（无限滚动）事件。
9.怎么在谷歌浏览器上设置10px
常用的属性： .text {
font-size: 20px;
transform: scale(0.5);
}
或则使用 em； 1em = 16px font-size: 62.5%
10.transform用法
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
11.简述下rem
px: px 实际上就是像素，相对长度单位，相对于显示器屏幕分辨率而言的。
em: 相对长度单位，相对于父级单位的字体尺寸。如果父级单位字体未设置，就默认是1em=16px;这个值是所有未经调整的浏览器默认的。
rem: 相对长度单位，css3新增单位，相对的是html根元素；网页中的根元素指的是html，我们通过设置html的字体大小就可以控制rem的大小。
说完了第一场以css为主流的面试，接下来言归正传来一场真正的vue架子厮杀.....
下午面试：
1.说下vue-cli 2.x和3.x搭建的目录结构区别
vue cli3.x：
去掉了 vue cli2.x build和config等目录，大部分配置都集成到了vue.config.js这里面了。需要拓展的话，在vue.config.js里面拓展。
vue.config.js里大概包括了配置 常用的输出 根目录 预处理 devServer配置 pwa，dll，第三方插件等
webpack的配置在这个属性里修改configureWebpack（Mock是在这里面的）index.html和icon都放置在public文件夹
2.vue如何通过一个index. html实现页面跳转，谈谈你的理解
讲道理，没理解面试官想问啥，vue-cli 实质是封装了很多配置的webpack项目
webpack是用来做前端项目打包以及编译功能,类似与后端的maven.
至于入口JS是怎么引入的,就要看webpack的插件之一,html-webpack-plug
这个插件的功能就是来处理html页面,并按照配置引入编译后的js 以及CSS.
而vue页面跳转则主要通过配置router-link或者在js中设置params或query来操作
3.说说/#的作用，为什么默认hash
vue-router 默认 hash 模式，还有一种是history模式。 hash模式的工作原理是hashchange事件，可以在window监听hash的变化；
#是用来指导浏览器动作的，默认为hash是因为hash无需后端配合再进行配置，而且兼容性好。
4.vue组件传值的方式，props和data的区别
data是每个组件的私有内存，可以在其中存储需要的任何变量。props是将数据从父组件传递到子组件的方式。
子组件中的data数据，不是通过父组件传递的是子组件私有的，是可读可写的。
子组件中的所有 props中的数据，都是通过父组件传递给子组件的，是只读的。
5.vue路由跳转传值的方式，都有什么区别，遇到过那些坑，如何处理
第一种方法：拼接方式 ，（path: '/detail/:id'）；这种方式传参，页面刷新数据不会丢失。
第二种方法：params传参，通过路由属性中的name来确定匹配的路由，通过params来传递参数，不能配合path使用。页面刷新数据会丢失
第三种方法：query传参，使用path来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会显示在url后面?id=？，参数会暴露在url中。
6.浏览器存储数据的方式，有什么区别
其中方法主要有三种：cookie、sessionStorage、localStorage。
1.是否与服务器端交互：
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。（每台电脑只会默认/记住本地选择的，因为不请求服务器）
2.存储大小限制：
cookie存储的数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，比如会话标识；
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3.数据有效期不同：
sessionStorage仅在当前浏览器窗口关闭或刷新前有效，需要持久保存的数据自然也就不可能使用sessionStorage；
localStorage保存数据始终有效，窗口或浏览器关闭也一直保存，因此可用作持久保存数据；
cookie只在开发人员设置的有效期时间之前一直有效，即使窗口或浏览器关闭。
4.作用域不同：
sessionStorage在不同的浏览器窗口中不能共享，即使是同源页面；
localStorage 在所有浏览器的同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。
7.eventBus原理，优缺点
EventBus是消息传递的一种方式，基于一个消息中心，订阅和发布消息的模式，称为发布订阅者模式。
on('name', fn)订阅消息，name:订阅的消息名称， fn: 订阅的消息
emit('name', args)发布消息, name:发布的消息名称 ， args：发布的消息
优点:调用很简单,解耦了
缺点:
1.大量的滥用，逻辑分散，出现问题后比较难定位
2.代码的可读性差
3.性能问题
8.$set作用，哪些场景用到
vue在创建实例的时候把data深度遍历所有属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。让 Vue 追踪依赖，在属性被访问和修改时通知变化。所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
当你在对象上新加了一个属性 newProperty,当前新加的这个属性并没有加入vue检测数据更新的机制(因为是在初始化之后添加的),vue.$set是能让vue知道你添加了属性, 它会给你做处理
场景1:通过数组的下标去修改数组的值,数据已经被修改了,但是不触发updated函数,视图不更新,
场景2: vue中检测不到对象属性的添加和删除
9.nextTick原理和用处
Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新；
在 created 和 mounted 阶段，如果需要操作渲染后的试图，也要使用 nextTick 方法。
其他应用场景如下三例：
例子1：点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点
例子2：点击获取元素宽度。
例子3：使用 swiper 插件通过 ajax 请求图片后的滑动问题
10.watch和computed区别和使用场景
watch中的函数是不需要调用的
computed内部的函数调用的时候不需要加()
watch 属性监听 监听属性的变化
computed:计算属性通过属性计算而得来的属性
watch需要在数据变化时执行异步或开销较大的操作时使用
对于任何复杂逻辑或一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性computed。
computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
computed中的函数必须用return返回最终的结果
当computed中的函数所依赖的属性如果没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取
watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；
2、使用场景
computed
当一个属性受多个属性影响的时候就需要用到computed
最典型的例子： 购物车商品结算的时候
watch
当一条数据影响多条数据的时候就需要用watch
搜索数据
总结： 其实这也顶多算是初中级的面试题，楼主本人也是菜鸟一个，很多东西平时都有接触，只是没有多思考原理和优缺点，现在想想这种拿来主义惨遭社会鞭策很正常；
以后多留心时时刻刻保持学徒之心，不懂就查，多思多记。与诸君共勉，祝早日拿到满意的offer。
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
