前端面试后的面试官问题总结

2019年在一个月的面试中总结了一些被问过的问题，有一些问题带有答案，有的没有写，括号里是网上找的对应的知识点。

答案可能比较粗糙和浅显，可以在去面试的路上随便翻翻看看这些问题，自己找找答案，祝面试顺利

第一家，电面

1.computed和methods的区别：（https://www.cnblogs.com/widgetbox/p/8954162.html）

当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。

如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数，也可以是方法名，或者是对象，包含选项。如果在data中没有相应的属性的话，是不能watch的，这点和computed不一样。

methods则必须要有一定的触发条件才能执行，如点击事件；

2.vue-resource（https://www.runoob.com/vue2/vuejs-ajax.html）

vue-axios（https://www.jianshu.com/p/b0381545d7df）

Vue 实现异步加载需要使用到 vue-resource 库，发送请求的http和axios

vue-resource 提供了 7 种请求 API(REST 风格)：

get(url, [options]) head(url, [options]) delete(url, [options]) jsonp(url, [options]) post(url, [body], [options]) put(url, [body], [options]) patch(url, [body], [options])

3.vuex(https://www.cnblogs.com/qiu-Ann/p/7483205.html)

状态管理

store

state

mutation

action

getter

4.nodejs跨域，数据存放（mongoose）

5.axios与ajax的关系（https://www.cnblogs.com/Bobo999/p/9453281.html）

Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

axios：

用于浏览器和node.js的基于Promise的HTTP客户端

1. 从浏览器制作XMLHttpRequests

2. 让HTTP从node.js的请求

3. 支持Promise API

4. 拦截请求和响应

5. 转换请求和响应数据

6. 取消请求

7. 自动转换为JSON数据

8. 客户端支持防止XSRF

ajax的原理

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax的核心就是是JavaScript对象XmlHttpRequest，这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口。XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

第二家，八通线

6.router钩子(https://www.cnblogs.com/heioray/p/7193841.html)

1、全局钩子 beforeEach和afterEach

2、某个路由独享的钩子 beforeEnter,beforeLeave

3、组件内钩子 beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave

路由规则(https://blog.csdn.net/keep789/article/details/81948638)

传参路径  :to="'/index/'+item.pid" ；

存储路径参数    path：“/index/：id；

获取  $route.params.id

7.vue生命周期

beforecreate，created 数据

beforemounte，mounted 挂载

beforeupdate，updated 更新数据

beforedestory，destoryed 销毁

8.css预加载器？？？

less为例，结构清晰，便于扩展。对于模块很多的应用特别是单页 app，经常需要用 selector 来划分不同模块的 CSS 的 scope。应用less就简洁明了，可避免少写很多重复的选择器，而且结构非常清晰，相对于传统的css写法，可极大的避免选择器权重问题。编译速度快。

.module {

　.action {

　　a, a:hover {

　　　//styles

　　}

　}

}

9.数据绑定原理

object.definedproperty，自定义对象的属性获取和属性设置，监控对数据的操作，从而可以自动触发数据同步

10.svn的使用

TortoiseSVN工具----checkOut下载，commit提交，update更新新版本，add新建+commit提交

 

第三家 创业公司

几乎就是聊一聊薪资待遇不稳定，能否接受无限制加班，入不敷出的风险等等问题

第四家 2号线东直门 

11.this指向，在vue中methods中的指向（ https://www.cnblogs.com/pssp/p/5216085.html）

指向window，严格是undefined

构造函数中指向实例，

vue中指向vue实例

改变this指向（https://www.cnblogs.com/pssp/p/5787116.html）

call就是挨个传值，apply传一个数组

12.组件之间传值（https://blog.csdn.net/qq_35430000/article/details/79291287）

路由带参数，本地存储，父子传值，vuex

父子组件传值（）

父传子 props ：

子传父 $emit @

13.轮播图怎么做

 

14.去掉一个字符串中的所有空格

str.replace(/\s/g,"");

去掉前后空格的方法也可以找一下（http://www.360doc.com/content/14/0623/10/13883922_389029588.shtml）

15.div居中放置（https://www.cnblogs.com/jiekk/p/5802147.html）

定位+50%

定位+4个0+margin：auto

display：table-cell；vertical-align：middle

第五家 外派

15.元素居中

text-align和line-height

16.观察者模式（https://www.cnblogs.com/pi-xia/p/9351432.html）

（https://www.runoob.com/design-pattern/observer-pattern.html）

第六家 西二旗

笔试：算法，数学，逻辑

第七家 西二旗

17.上线维护问题

第八家 上地

18.echarts图表，添加飞机飞路线的动画

第九家 芍药居

笔试：要求会java

19.css选择器有哪些，哪些属性可继承

20.测过哪些兼容，他们的内核是什么

21.知道哪些前端框架，选一个阐述

22.vue的路由怎么使用

第十家 关庄

23.你说一下vue吧，知道vue-set吗，做过模块化开发吗

（https://blog.csdn.net/qq_37339364/article/details/82750947）

（https://blog.csdn.net/blog_jihq/article/details/79191008）

第十一家 电面

24.父子组件传值，子改父值怎么改

25.封装一个组件，有80%共同，20%不同

80%公共+插槽slot（https://blog.csdn.net/zhouzuoluo/article/details/80536754）

第十二家 电面

26.对象深拷贝

JSON.parse（） JSON.stringfy（） 递归拷贝

给对象增加新属性 vue.Set（）

使用vue.$set(对象名，键，值)

27.computed计算属性怎么用的

{{}} 变量：function（）{}

28.get很慢呢怎么办

第十三家

29.js继承的方法（https://www.cnblogs.com/humin/p/4556820.html）

原型链继承，构造继承，实例继承，拷贝继承，组合继承。寄生组合继承

30.项目中遇到过什么问题

如：swiper每一页单独加动画

31.性能优化方面做过什么（https://www.cnblogs.com/coober/p/8078847.html）

1. 减少 HTTP请求数

2. 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）

3. 按需加载

4. 图片等的压缩等

32.盒模型（height问题）（https://www.cnblogs.com/chengzp/p/cssbox.html）

第十四家

33.vuex，vue的生命周期，路由规则，

34.es6新特性，（https://www.jianshu.com/p/87008f4f8513）

字符串方法，数组方法，解构，扩展运算符，箭头函数等

阮一峰（http://es6.ruanyifeng.com/）

35.flex布局（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）

    找找原理，记几个效果样式代码

echarts，地图插件，（https://www.echartsjs.com/feature.html）

37.鉴定数据类型的方法，（https://www.cnblogs.com/dushao/p/5999563.html）

typeof，instanceof， constructor ，prototype，jquery.type（）

typeof 和instanceof 的区别

typeof 它返回值是一个字符串，其实就是判断参数是什么类型的实例，就一个参数，一般只能返回如下几个结果："number"、"string"、"boolean"、"object"、"function" 和 "undefined"。

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

语法：object instanceof constructor

参数：object（要检测的对象.）constructor（某个构造函数）

描述：instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

38.处理兼容性问题（https://blog.csdn.net/xustart7720/article/details/73604651）

比如：滚动条样式兼容问题---nicescroll插件

39.浏览器是怎么工作的（https://www.cnblogs.com/CandyManPing/p/6635008.html）

浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI（Uniform Resource Identifier统一资源标识符）来指定所请求资源的位置，通过DNS查询，将网址转换为IP地址。整个浏览器工作的流程： 

　　1、输入网址。 

　　2、浏览器查找域名的IP地址。 

　　3. 浏览器给web服务器发送一个HTTP请求 

　　4. 网站服务的永久重定向响应 

　　5. 浏览器跟踪重定向地址 现在，浏览器知道了要访问的正确地址，所以它会发送另一个获取请求。 

　　6. 服务器“处理”请求，服务器接收到获取请求，然后处理并返回一个响应。 

　　7. 服务器发回一个HTML响应 

　　8. 浏览器开始显示HTML 

　　9. 浏览器发送请求，以获取嵌入在HTML中的对象。在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。这些文件就包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等；

第十五家

40.MVVM模式（https://www.cnblogs.com/goloving/p/8520030.html）

MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

　　在MVVM架构下，View 和 Model 之间通过ViewModel进行双向交互，View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

　　View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

41.双等和三等的区别（https://blog.csdn.net/ntc10095/article/details/51302920）

==， 两边值类型不同的时候，要先进行类型转换，再比较。 ===，不做类型转换，类型不同的一定不等。

42.vue的data为什么是一个函数？（https://www.cnblogs.com/wangjiachen666/p/9876266.html）

可以形成单独作用域，组件之间相互独立，复用组件时也不会影响单个组件的数据

43.关于webpack（https://www.jianshu.com/p/bb1e76edc71e）

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。

模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。

如何配置按需加载（https://segmentfault.com/a/1190000011519350）

1.vue配置路由，异步组件 2.import（）3.webpack提供的require.ensure（）

44.v-if和v-show的区别（https://blog.csdn.net/ning0_o/article/details/56006528）

v-if是动态的向DOM树内添加或者删除DOM元素； 

v-show是通过设置DOM元素的display样式属性控制显隐；

v-if 有更高的切换开销，如果在运行时条件不太可能改变，则使用 v-if 较好，

v-show 有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；

45.import和require的区别（https://www.imooc.com/article/22371?block_id=tuijian_wz）

-----都是es6出的关于js的模块语法，

require在导出的文件中定义module.export做对象,导出的对象的类型不限（可以是任何类型，字符串，变量，对象，方法），在引入的文件中调用require()方法引入对象，获取属性即可

import导出的对象与整个模块进行结构赋值，导出的对象必须与模块中的值一一对应

require 是赋值过程并且是运行时才执行， import 是解构过程并且是编译时执行

require相当于全局方法，可以在任何地方执行。而import必须写在文件的顶部。

require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量，而import只需要依据import中的接口在编译时引入指定模块所以性能稍高

第十六家

46.对jquery的理解（https://www.cnblogs.com/xqx-qyy/p/7562995.html）

是轻量级js框架，提供了大量元素选择器，封装DOM操作可以更方便操作节点，提供完善的事件处理机制，解决了大量兼容问题，内置了一些简单有用的内置动画

47.vue中的key（https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/1）