2021啦，面试虐我千百遍，我待面试如初恋

最近参加了两场甲方的现场面试，下面是第一场，主要问的是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

1. target：触发事件的元素。
   currentTarget：事件绑定的元素。

2. 两者在没有冒泡的情况下，是一样的值，但在用了事件委托的情况下，就不一样了；

3. 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。

标签：vue,浏览器,千百遍,面试,我待,事件,元素,数据,属性
来源： https://blog.csdn.net/weixin_42503783/article/details/115327743