kkb--小组面试总结---持续更新

面试总结

开发中遇到的坑点

1.axios跨域不带cookie 必须设置才可以
postman中测试接口没有问题
查阅文档发现 跨域携带cookie是ajax的问题 axios 只是 一个封装的ajax库而已
通过百度查阅文档需要给他一个设置(axios.defaults.withCredential = “true") 才能允许跨域携cookie.

2.vue中使用饿了么input组件监听回车事件不起作用
vue使用element-ui的el-input监听不了回车事件，原因是element-ui自身封装了一层input标签之后，把原来的事件隐藏了，加上.native可以监听到组件根元素的原生事件

3.elementUI 有一个自带路由跳转的方法,但路径需要我们自己修改

4.iscroll应用坑点
页面通过搜索刷新内容时,出现isscroll滚动条时,当页面有一个差值问题,我们需要更新滚动条来匹配当前页面,把更新逻辑写在updated钩子函数中即可

5.a标签 不能嵌套p标签.

6.引用定义组件的时候需要注意的点

import button from ‘…/…/components/button/Button’ //在引用组件时，不要用html关键字作为名字，这样在解析的时候它会当成html元素来解析，例如这里用了button，它会当做html的元素。

7.父组件监听不到子组件向外触发的时间，原因可能是$emit传入的事件名称只能用小写，不可以使用驼峰式命名书写

8.Vuex数据跟踪的坑点
根据逻辑动态的添加属性,Vue是不会跟踪属性的改变.通过打印发现动态添加的属性 没有get和set
vue之所以能够跟踪属性的改变 依赖于get和set
查阅文档发现 动态添加的属性 必须设置Vue.set才能够跟踪.

set-get 干了什么事情
在文档中有响应式原理
研究了一下 Object.defineProperty 可以为对象添加属性 监听数据的设置以及取值 组件试着实现了一下双向绑定的原理
其实就是get和set中做事情.

webpack总结

1.通过npm脚本修改终端打包指令,通过在package.json中修改script属性中修改指令的对应关系,实现npm指令更改
2.配置文件webpack,config.js有两个基本属性,entry和output. entry是用来打包的文件, output是用来填写打包的最终路径,文件的命名
3.loaders是解析器,webpack只能解析js模块,所以类似css文件打包需要通过loaders解析器解析webpack才能解读,通过在配置文件config.js中添加module属性填写你要解析的文件和你要应用的解析器实现解析,sass,less文件和把es6转换成es5

4.dev-server技术,用于把项目放于服务器,实现自动更新的功能,通过在配置文件设置属性devserver属性来指定服务器跟目录,
在package.json中设置服务器开启指令.

常见的兼容性问题（重点）

1、img 的alt属性（在图片src为空的条件下），浏览器显示结果不一样

chrome下显示边框和文字；IE显示文字

2、png24的图片在IE6上显示出现背景，解决方案是做成png8

3、浏览器默认的margin和padding不同，加*{margin:0;padding:0}

4、IE双边距bug：在float的养护控制中加入_display:inline

5、link样式设置顺序：l-v-h-a

6、IE6下图片的下方有空隙：给img设置：display:block;

7、IE下两个float之间会有3px的bug：给右边的元素也设置float：left

8、IE6下使用margin：0 auto；无法居中：给父容器设置：text-align：center

9、IE6下无法设置1px 的行高：由于其默认高度，可以为其设置overflow：hidden或者line-height：1px

10、事件绑定：标准addEventLlistener，IE：attachEvent

11、事件捕获和事件冒泡

vue的双向绑定

双向数据绑定它实现的效果就是页面某一个节点发生改变,其他跟该节点共同关联data某数据的节点也会同步进行改变.原理就是页面节点数据发生改变,我们通过dom操作修改对应的data数据,然后通过Object.definedProperty的set方法监测到更改后的数据,通过dom元素操作把监测的更改数据传递给页面的其他关联节点

axios拦截器

请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。
响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。

常见的布局

pc端: 文档流布局 浮动布局(float) 定位布局
移动端:flex布局 rem布局 流体布局 响应式布局

js的数据类型

三大引用类型1.Object(对象)2.Array(数组) 3 Function(函数)

五种值类型 Number(数字),String(字符串),Boolean(布尔值),Undefined,Null

Promise怎么用?

Promise他是解决回调地狱,创建promise对象,通过then可以获取到结果,resovle可以把成功的结果传递出来,rejcet是把失败的结果传递出去.

优点:promise主要解决回调地狱问题, 让代码更清晰，减少嵌套函数

缺点:
1.无法取消Promise，一旦新建它就会立即执行，无法中途取消。
2.如果不设置回调函数，Promise内部抛出的错误，不会反应到外部.

es6的新特性?

箭头函数 ,let, const, 扩展运算符(…) 解构, 模块字符串(``), 属性的简写的,promise等等

git常用指令有哪些?

add 添加
conmit -m 描述信息
status 查看状态
log 查看日志
clone 克隆远程仓库的地址
push 追加到远程仓库
pull 拉最新的仓库的信息
baranch 创建新分支
checkout 切换到新的分支里

数组去重？

1.双重 for 循环 最容易理解的方法，外层循环遍历元素，内层循环检查是否重复

2.用一个空数组去存首次 出现的元素
利用 indexOf 属性 indexOf是返回某个指定的字符在字符串中出现的位置，如果没有就会返回-1
因此我们可以很好的利用这个属性 当返回的是 -1时 就让其存入数组

3.es6的 new set方法

## 冒泡排序的原理

1.比较相邻的元素。如果第一个比第二个大，就交换他们两个。
2.对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
3.针对所有的元素重复以上的步骤，除了最后一个。
4.持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较

如何解决跨域的问题

浏览器处于安全的考虑,启用了同源策略,只有主机,域名和端口号都相同的地址才能算同源,以上三点任何一个不一样都算跨域;

JSONP
我们可以在页面去定义一个回调函数,可以通过script标签,src属性来发送跨域的请求,服务器会返回对回调函数的调用,回调函数的
参数是服务器返回来的,然后我们就可以在函数的调用中处理服务器返回的数据了.
Cors
在服务器给他添加一个头字段, 就可以允许跨域了.
反向代理
就是创建一个自己的服务器,然后自己的服务器发请求到目标服务器,然后响应到自己的服务器,
我们在自己的服务器设置地址的同源,然后浏览器访问自己的服务器 就不会出现跨域的问题.

node.js了解

我可以用node去搭建一个简单的服务器, 可以使用第三方模块Express去搭建服务器,
首页先导入 Express模块.然后创建服务器,在创建服务器对象里,通过response.send方法 把数据返回出去.
通过 listen回调函数,加上端口号,开启服务器!

说说你对闭包的理解

闭包就是能够读取其他函数内部变量的函数. 闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

闭包有三个特性：
1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收

内存泄漏

引发内存泄漏的操作:
1.意外的全局变量(函数中没有用关键字声明的)
2.闭包引起的内存泄漏
3.没有清理的DOM元素的引用
4.被遗忘的定时器或者回调

解决办法
1.减少不要的全局变量.
2.避免死循环.
3.避免创建过多的对象.

Javascript垃圾回收方法

这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。
垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了

git跟svn的区别

1.GIT是分布式的，SVN不是分布式。
2.GIT把内容按原数据方式存储，而SVN是按文件。
3.GIT分支和SVN的分支不同。
4.GIT没有一个全局的版本号，而SVN有。
5.GIT的内容完整性要优于SVN。

HTTP 协议中,GET 和 POST 有什么区别?

get 传送的数据长度有限制,post 没有
get 通过 url 传递数据,在浏览器地址栏可见,post 是在报文中传递
post 一般用于表单提交
get 一般用于简单的数据查询,严格要求不是那么高的场景

webSocket

WebSocket 他是一个全双工的通讯协议,浏览器跟服务器只要完成一次握手,两者之间就可以长连接,并进行双向数据传输
他的应用场景用在即时通讯呀,聊天室这些!

全双工的意思:是通讯传输的一个术语。通信允许数据在两个方向上同时传输: (这个自己知道就行!)

三次握手步骤(抽象派)

第一次:客户端,向服务器打招呼.你是服务器嘛
第二次:服务器回应,我是服务器,你是客户端嘛
第三次:客户端说 我是客户端
然后就建立连接成功后,接下来就是正式传输数据!

四次挥手步骤(抽象派)

断开连接时,需要进行四次挥手(因为是全双工的,所以需要四次挥手)
比如说:
主动方: 我已经关闭向你那边的主动通道了,只能被动方接受了.
被动方: 收到了通道关闭的信息
被动方:那我也告诉你,我这边向你的主动通道也关闭 了.
主动方:最后收到数据,之后双方无法通信了.

面向对象

面向对象其实就是把方法和属性写在对象中,通过这个对象去获取方法和属性,对于js语言不会面向对象语言,
他是基于对象的语言,延续了面向对象的封装,还有继承.

有三个特性 封装,继承,多态
封装:减少了大量的冗余代码, 将复杂的功能封装起来，对外开放一个接口，简单调用即可。
继承：对象是可以继承，所以面向对象具有继承性，
多态:我们js好像没有多态.只能模拟 (这个可以不说)

原型的继承

原型的属性能被实例对象继承,实例对象在当前对象访问不到想要的属性会通过–proto–属性到原型中访问,原型中再没有再通过–proto–到Object的原型中访问,再没有就在自己对象新建属性,返回undefined,而这通过proto反问属性的方式就是原型的继承.

说说你对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。

谈谈性能优化问题

1.预加载
2.标签语义化
3.外链引入css js脚本
4.压缩合并 css js
5.图片懒加载
6.精灵图
7.减少请求
8.减少dom操作
9.预加载
10.少用全局变量
11.减少代码冗余
12.减少重绘和重排
13.将CSS放在页⾯面顶部
14.Ajax缓存
15.减少cookie大小

jQuery的源码看过吗?

了解过,在JQuery体系中,主要有两个对象,一个是jquery构造函数,第二个是jquery的构造函数产生的对象,
jquery对象 是jquery原型属性的init方法实例出来的对象,调用jquery构造函数时自动返回init实例,以达到不用new创建对象的目的
然后他就把 $ 和 jquery 暴露到了window中,用户可以直接通过 $或者 $(’’) 调用jquery对象原型中的方法.

v-if和v-show的区别

v-if 当隐藏结构时,该结构会直接从整个dom树中移除
v-show 当隐藏结构时,是在改结构样式的加上display:none,结构依然保留
如果要频繁的使用切换的话 可以使用v-show,这样性能消耗没有那么大.

mvc和MVVM的区别

Mvvm:
M-----Model(模型) 指的是后端传递的数据
v-----View(视图) 指的是所看到的页面
vm----ViewModel(视图-模型) 它是连接view和model的桥梁,

他有两个方向:
1.他可以将后端传递的数据转化成所看到的页面
2.还可以将所看到的页面转化成后端的数据

mvc:
mvc是Model(模型)-View(视图)- Controller(控制器)的简写
m和v跟mvvm里面的 m和v是一个意思.
C—Controller指的是页面业务逻辑

说一下vuex

Vuex 就是一个仓库，可以用来存放数据,仓库里面放了很多对象。其中 state 就是数据源存放地，对应于与一般Vue 对象里面 的 data.

vuex 有哪几种属性？

1.State (仓库数据)
2.Getter(相对于是vuex的计算属性)
3.Mutation (数据改变的方法, 同步)
4.Action (类似于Mutation) 可以包含容易异步的操作
5.Module (模块化Vuex)

vue的生命周期

总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

beforeCreated(创建前) : vue实例 挂载的$el 和data 数据 还没初始化

created (创建后) : 在这个created钩子,data的数据可以获得到,但是 $el还没有

beforeMount(挂载前): $el 和 data数据 都初始化好了 ,这个生命钩子还在挂载之前,还是虚拟的dom节点

mounted (挂载后) : vue实例挂载完成,在这个生命钩子我们可以获得到dom元素.

beforeUpdate(更新前): 当执行这个钩子时,页面中的显示的数据,还是旧的,此时data数据是最新的,页面跟最新的数据还没有同步.

updated (更新后): 只要data数据发现改变,就会执行这个updated钩子!

beforedestroy(销毁前):执行这个钩子时,实例身上的所有data和methods,以及过滤器等等,都处于可用状态,还没有真正执行销毁的过程

destroy(销毁后) :当执行这个钩子,就已经完全销毁了,此时,所有的数据(data),方法(methods),过滤器,都不能再用了

vue的好处

随便说几个优点：
1.不需要像html页面那样频繁的操作真实的dom元素，它本身都是虚拟dom跟数据进行捆绑，降低了性能消耗。
2.简单易用,文档齐全,使我们开发人员编码容易.
3.还是轻量级的框架
4.组件化开发

vue怎么创建组件?

全局组件:Vue.component 第一个参数是创建组件名,第二个参数就是你要写的内容
局部组件:在vue实例里面注册components就可以了.

v-for的key有什么作用

v-for更新已经渲染的元素列表时,如果要修改列表的数据时,他会根据key的值去判断某个值是否修改,则重新渲染这一项,否则他会复用之前的元素.

路由传值

params传递参数 可以在router-link 还有$route.push() 来传递参数,
query传递参数

深拷贝跟浅拷贝

浅拷贝: 只能拷贝一层,不能对对象里面的子对象进行拷贝.
深拷贝: 可以拷贝多层,每一层的数据都会拷贝出来；

说一下flex布局的垂直居中-水平居中

display: flex;
justify-content: center; /* 相对父元素水平居中 /
align-items: center; / 子元素相对父元素垂直居中 */

vue的传值,子传父—父传子 —bus传值 –

父传子:在子组件创建一个props给他定义个属性名, 然后在父组件引入子组件, 然后注册组件, 在子组件标签里面把值传过去.

子传父:在子组件中创建一个按钮，给按钮绑定一个点击事件,在点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数,然后在父组件引入子组件, 然后注册组件, 在子组件标签里绑定该自定义事件.就可以了.

bus传值: 首先创建一个bus.js文件, 比如a组件 传值给b组件, 两个组件都有引入bus文件, 然后b组件通过 bus.$emit进行传递数据a组件通过bus.$on去进行接收数据

多层嵌套组件传值

可以用vuex 如果只是单纯的传递数据,不做中间的处理,用vuex 有点大材小用.
也可以用 v-bind 绑定 $attrs方法

标准盒模型和怪异盒模型

标准模型:一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
怪异模型:一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

hash模式跟history模式

在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的

vue的ssr

就是把vue页面的生成,然后放在服务器里面, 让vue第一次加载更加快速,然后更利于seo

$route跟$router的区别?

答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

vue.js的两个核心是什么？

数据驱动、组件系统

vue常用的修饰符？

.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

对keep-alive 的了解？

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

脚手架的打包优化

cnd 加速
路由懒加载
移除map文件

防抖跟节流

在前端开发中会遇到一些频繁的事件触发，例如input，keyup，keydown，scroll，resize，mousemove等，这非常影响性能，所以我们需要控制它们触发的频率，方法就是防抖与节流。

防抖的原理就是：要等你触发完事件 n 秒内不再触发事件，我才执行。

节流的原理很简单：如果你持续触发事件，每隔一段时间，只执行一次事件。

有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。

前端常用的插件

Animate.css (动画库)
iscroll (滚动库)
Swiper (轮播图)
moment (时间类库)
layer (弹出框)
ustbhuangyi/picker (级联选择器)
ECharts (数据可视化)
pagination (分页插件)
wangEditor (富文本编辑器)

vue的单页面和多页面

单页面优缺点:

单页面开发常用于webapp开发和后台管理系统,h5等。

优点:用户体验好, 快,减小服务器的压力.
缺点:不利于seo,初次加载时耗时多,页面复杂度提高很多

多页面优缺点:

多页面开发常用于PC端的网站

优点:有利于SEO,开发成本较低.
缺点网站的后期维护难度较大,页面之间的跳转用时较长，用户体验较差.

vue跟localstorage的区别

vuex是vue中的状态管理机制,是响应式的，方便组件之间传值；
而localstorage是本地存储，是将数据存储到浏览器的方法，一般是在跨页面传递数据时使用。

@import跟link的区别

区别1：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
　
　区别2：link支持使用Javascript控制DOM去改变样式；而@import不支持。

 区别3:    加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

em跟rem的区别

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

cookie和localstroage与sessionstroage与cookie的区别

1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

从敲入 URL 到渲染完成的整个过程.

1.根据域名到DNS中找到IP
2.根据IP建立TCP连接
3.连接建立成功发起http请求
4.服务器响应http请求
5.浏览器解析HTML代码并请求html中的静态资源(css,js)
6.关闭TCP连接
7.浏览器渲染页面

XSS和CSRF防御

XSS
可以在cookie里去设置一个httponly属性, 这样js脚本就无法读取cookie的信息.
CSRF
可以用token验证, 当我们登陆成功后,服务器会返回一个token给我们,当我们提交表单时,服务器会看一下这个token合不合法,
如果不合法,就拒绝请求!

前端的加密方法

base64加密
md5加密
sha1加密

src和href的区别

href
是指向网络资源所在位置,用于超链接
src
是指向外部资源的位置, 用于js脚本 img图片和框架的导入等等.

Vue 中可以定义组件模版的几种方式

1.字符串形式
2.模版字面量(反引号包裹大量的html标签)
3.X-template 在页面使用script标签 在type属性中写text/x-template 在给一个id 在vue.conponent中template 通过 id 链接。

http和https

http(超文本传输协议): 是明文传输的,浏览器与服务器之间进行数据交互的规定.
https: 是http+ssl 是加密传输, 安全性会好一点

计算属性和侦听器的区别

他们的相同点是
就是依赖的数据发生改变时就会触发.
不同点是
侦听器(watch): 是一个数据影响多个数据
计算属性(computed): 是一个数据受多个数据影响