面试题

axios和ajax的区别

axios是通过promise实现对ajax技术的一种封装
axios可以运行nodejs里边，ajax只能在js中使用
拦截请求和响应（Interceptors拦截器）
axios可以并发请求

h5+css3新特性有哪些

h5的新特性：
1.增加了语义化内容的元素，如header，footer，artical，section，nav
2.增加了用于绘画的canvas元素以及svg元素等
3.增加了用于多媒体的video和audio元素
4.增加了localstorage和secssionStorage
5.HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能

CSS3的新特性:
1.新增属性选择器，伪元素选择器
2.新增边框圆角，边框阴影，文字阴影，2d，3d转换，渐变，动画等效果

LocalStorage，SessionStorage，Cookie的区别以及使用的场景

储存方式	储存大小	清除	使用场景
cookie	4K左右	可以设置失效时间	判断用户是否登陆过网站，记住密码等
localStorage	5M左右	除非被清除或者卸载浏览器，否则永久保存；	适合长期保存在本地的数据，比如说夜间模式，主题模式等
sessionStorage	5M左右	仅在当前会话下有效，关闭页面或浏览器后被清除	网上商城中的购物车，ajax的数据缓存

axios的二次封装

• 接口放在一起，统一处理
• 配置开发和生产环境地址
• 通过请求和响应拦截器，对请求头进行设置，添加token等字段，添加中英文设置
• 全局loading处理
• 请求超时的时候发送多次请求，限制快速点击，中断请求等等
• 根据后端状态码，添加错误处理提示，因为这个是国际化的，所以我们当时是封装了一个模块去处理

websocket

websocket--http协议的一个补丁，支持长久连接。http协议的服务器被动性，只有服务器不断发送请求，服务器才会返回response；而websocket协议的服务器具有主动性，只要客服端发起一次请求，就会一直连接，而服务器只要有response就可以主动给返回。

缺点：网络通信问题，若是中间网络信号等问题，互动通信的信息没有抵达接受方，由于是长连接，所以无法判断是否数据丢失。

call,apply,bind的区别

• 都是用来改变函数的this对象的指向的；
• 第一个参数都是this要指向的对象；
• 都可以利用后续参数传参，apply的第二个参数是一个参数数组，call的第二个及其以后的参数都是数组里面的元素，就是说要全部列举出来。
• bind是返回对应函数，便于稍后调用，apply，call是立即调用。

vue 组件通信

父-子 props
子-父 $emit $on
兄弟 vuex
路由传参

父组件调用子组件方法

ref $refs

子组件调用父组件方法

• this.$parent
• 子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。
• 父组件把方法传入子组件中，在子组件里直接调用这个方法

闭包（什么是闭包？什么情况下用到闭包？有什么优缺点？为什么不被垃圾回收机制回收？什么是垃圾回收机制？）

闭包就是函数内嵌套函数
在函数中定义的变量, 被内层函数应用后, 不会被垃圾将回收机制回收
优点: 可以使用函数内的变量, 并且不被回收 缺点: 过多使用, 会对内存造成压力
因为他们相互调用，所以不会被垃圾回收机制回收。
不被调用的方法或变量，就不会被垃圾回收机制回收。

跨域的解决方法

• JSONP
  利用src不受同源策略的限制, 可以访问不同源的资源
  而script标签期望请求到一段JS代码
  所以利用script标签去请求不同源的后端接口
  接口返回一段前端函数调用的JS代码, 并把数据作为参数传入 前端通过函数的处理逻辑获取数据 jsonp理论上不属于ajax请求

• CORS
  后端接口设置响应偷, 为指定用户或所有用户开发访问权限

• 服务器代理
  因为后端访问不受同源策略的影响, 所以可以使用同源的服务器去访问不同源的资源 在把获取到的资源返回给前端

• sorket
  sorket没有跨域问题, 可以使用sorket进行前后端数据交换

原型链

​ 当访问一个对象的某个属性时，会先从该函数本身属性上找，如果没有找到，则会在他的 _ proto _隐式属性（即构造函数的prototype）上去找，如果还没有找到的话，则就会再去prototyep的 _ proto _ 中去找，这样一层一层向上查找就会形成一个链式结构，就称之为原型链。

DNS是什么，解析域名的原理，过程是什么？

DNS( Domain Name System)是“域名系统”
DNS通过域名解析系统解析找到了对应的IP地址，域

具体过程如下：

• 客户机提出域名解析请求,并将该请求发送给本地的域名服务器.
• 当本地的域名服务器收到请求后,就先查询本地的缓存,如果有该纪录项,则本地的域名服务器就直接把查询的结果返回.
• 如果本地找不到：
  ①用户主机上运行着DNS的客户端，就是我们的PC机或者手机客户端运行着DNS客户端了
  ②浏览器将接收到的url中抽取出域名字段，就是访问的主机名，比如http://www.baidu.com/
  ③DNS客户机端向DNS服务器端发送一份查询报文，报文中包含着要访问的主机名字段（中间包括一些列缓存查询以及分布式DNS集群的工作）
  ④该DNS客户机最终会收到一份回答报文，其中包含有该主机名对应的IP地址
  ⑤一旦该浏览器收到来自DNS的IP地址，就可以向该IP地址定位的HTTP服务器发起TCP连接

介绍一下vue

mvvm ， 单页面应用
有指令，支持双向绑定
组件化
面向对象
生命周期
vue-cli vuex vue-router
通过vue-cli搭建项目
路由
组件通信 props $emit $on vuex
vue ui

虚拟Dom及其作用/好处

虚拟DOM其实就是用JS来模拟DOM结构，把DOM的变化操作放在JS层来做，尽量减少对DOM的操作，然后对比前后两次的虚拟DOM的变化，只重新渲染变化了的部分，而没有变化的部分则不会重新渲染。
1.避免大量无谓的计算量，解决浏览器性能问题
2.操作虚拟dom即js对象远快于操作真实dom

引用数据类型和基础书类型的区别

常见的基本数据类型：Number、String 、Boolean、Null和Undefined。基本数据类型是按值访问的，因为可以直接操作保存在变量中的实际值。
引用类型数据：也就是对象类型Object type，比如：Object 、Array 、Function 、Data等。
基本数据类型，栈内存保存的是值。引用数据类型栈内存中保存的是key，内容放在堆内存中。

字符串有哪些方法

lenght，indexof，search

1. String.fromCodePoint()
2. String.raw()
3. 实例方法：codePointAt()
4. 实例方法：normalize()
5. 实例方法：includes(), startsWith(), endsWith()
6. 实例方法：repeat()
7. 实例方法：padStart()，padEnd()
8. 实例方法：trimStart()，trimEnd()
9. 实例方法：matchAll()

数组有哪些方法？

isArray，forEach，map，filter，reduce，every，set

1. 扩展运算符
2. Array.from()
3. Array.of()
4. 数组实例的 copyWithin()
5. 数组实例的 find() 和 findIndex()
6. 数组实例的 fill()
7. 数组实例的 entries()，keys() 和 values()
8. 数组实例的 includes()
9. 数组实例的 flat()，flatMap()
10. 数组的空位
11. Array.prototype.sort() 的排序稳定性

undefined和null区别

underfined ：没有定义
null：定义了，未赋值

jQuery获取兄弟节点

$('#id').siblings() 当前元素所有的兄弟节点
$('#id').prev() 当前元素前一个兄弟节点
$('#id').prevAll() 当前元素之前所有的兄弟节点
$('#id').next() 当前元素之后第一个兄弟节点
$('#id').nextAll() 当前元素之后所有的兄弟节点

link和@import的区别

两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

同步，异步，延时加载

同步：一步步加载
异步：同时加载
延时加载：等到要用或者空闲时在加载

做项目的思路

看设计图，选择框架，选择ui
搭建框架，引入ui，定制项目规范（公共组件，模块，页面放哪里，命名方式），设计公共css模块
配置路由，axios
页面绘制和接口（封装公共组件，模块）

a标签的优先级

href 优先于点击事件

如何用js把一个很大的图片压缩

我们用的是一个叫compressor.js的插件去压缩的，没有自己写，就像我们项目用到了上传图片组件，就会去压缩图片

如何监听全局的异常，包括浏览器崩溃，服务器问题等等

errorHandler

vue如何定义全局变量

• 挂载原型链上
• 全局变量模块

防抖和节流

• 防抖（debounce）
  所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
• 节流（throttle）
  所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
  对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

解释单向数据绑定和双向数据绑定以及他们之前的区别

• 单向数据绑定：
  是先把模板写好，然后把数据和模板整合一起形成html，然后把html代码插入文档流里面。
  缺点：Html代码一旦生成完以后，就没有办法再变了，如果有新的数据来了的话，只能去掉原来的HTML代码，再重新的数据和模板一起整合到文档流中。简单来说就是dom操作直接改变。

• 双向数据绑定:
  数据模型（Module）和视图（view）之间的双向绑定，视图改变，数据也会改变，数据改变，视图也会改变。
  优点：
  无需进行和单向数据绑定的那CRUD（Create，Retrieve，Update，Delete）
  操作双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。

promise可以解决回调地狱的底层原理是什么

回调地狱是因为异步回调函数嵌套太多。
​ Promise的内部也有一个 defers 队列存放事件，而 .then 方法的作用和发布订阅模式的on方法一样是用来订阅事件的，每次调用 .then 方法就会往defers队列中放入一个事件，当异步操作完成时， resolve方法标示前一个异步过程完成并从defers队列中取出第一个事件执行并返回当前对象保证链式调用，以此类推，就完成了所有异步过程的队列执行。

vue的生命周期

钩子函数	说明
beforeCreate	vue实例创建(newVue())之后, 初始化完成, 创建之前调用, 无数据, 无模板, 未挂载
created	vue实例创建完成后调用, 有数据, 无模板, 未挂载
beforeMount	vue实例挂载前调用, 有数据, 有模板, 未挂载
mounted	vue实例挂载后调用, 有数据, 有模板, 已挂载
beforeUpdate	数据更新前
updated	数据更新后
activated	keep-alive 组件激活时调用
deactivated	keep-alive 组件停用时调用
beforeDestroy	实例销毁前
destroyed	实例销毁后
errorCaptured	当捕获一个来自子孙组件的错误时被调用

深复制、浅复制

• 浅复制：
  浅复制只会依次复制对象的每一个属性，不会对这些属性进行递归复制。
  只是对复制对象的引用，栈和堆的关系，像number与string，boolean，null是栈的，直接可以用。
• 深复制：
  深复制需要层层递归，复制对象的所有属性，包括对象属性的属性的属性...
  1.for循环/遍历实现对象的深拷贝
  2.转换成json再转换成对象实现对象的深拷贝
  （json.parse（Json.strinify（arr）））
• 总结：
  object与Array存在占中，只用一个指针来引用值，拷贝之后的对象发生变化，原对象也会变化，只有真正的深拷贝才是真正的拷贝对象。

数组去重

1.for循环
2.es6 的set方法

var arr = [1,1,2,3,5,6,8,412,112,0,0,5];
//方法一
console.log(Array.from(new Set(arr)));
//方法二
console.log([...new Set(arr)]);

数组排序

冒泡排序
选择排序
sort排序

为什么axios在vue可以直接使用，而vuex要使用vue.use的使用场景

因为axios没有install，开发者在封装axios的时候，没有install这一步。
vue.use使用场景：vuex，vue-router，Mint-ui
install是默认的方法，当外界在use这个组件的时候就会调用本身的方法，同时传一个vue这个类的参数。

es6有哪些新特性？说说除了then跟catch，还用过哪些方法？

try..catch,try正确执行，catch错误执行。
es6特性：
1.const，let，用于定义变量
2.箭头函数，减少代码，函数
3.for ...of 遍历数组
4.class，类继承
5.解构，减少代码量
6.剩余展开符，得到剩余遍历
7.字符串模板，不用字符串拼接那么麻烦
acync await 等待一个异步方法执行完毕，放回结果。

清除浮动

1.clear：both
2.overflow：hidden
3.伪元素+zoom

http状态码

• 302：请求到的资源在一个不同的URL处临时保存 处理方式: 重定向到临时的URL
• 304: 请求的资源未更新 处理方式: 丢弃
• 404: 没有找到 处理方式: 丢弃

http的 8 种请求方式

请求方式	说明
GET	获取资源, 用来请求已被URI识别的资源
POST	传输实体, 向服务器传输数据
HEAD	获得报文首部, 用于确认URI的有效性及资源更新的日期时间等
PUT	传输文件, 用来传输文件，就像FTP协议的文件上传一样，要求在请求报文的主体中包含文件内容，然后保存在请求URI指定的位置
DELETE	删除文件, 服务器删除某个资源
OPTIONS	询问支持的方法, 查询针对请求URI指定资源支持的方法
TRACE	追踪路径, 让Web服务器端将之前的请求通信还给客户端的方法
CONNECT	要求用隧道协议连接代理, 要求在与代理服务器通信时建立隧道，实现用隧道协议进行TCP通信

vuex有几个属性

Vuex有五个核心概念：state, getters, mutations, actions, modules。

1. state：vuex的基本数据，用来存储变量
2. getter：从基本数据(state)派生的数据，相当于state的计算属性
3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
   回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

父子组件执行的顺序

• 加载渲染过程
  父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
• 子组件更新过程
  父beforeUpdate->子beforeUpdate->子updated->父updated
• 父组件更新过程
  父beforeUpdate->父updated
• 销毁过程
  父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

你使用过的遍历方法 (哪些可以跳出循环)

for 和 for...in (使用break跳出循环)
Array.every() (使用return或者return false 跳出循环)
Array.some() (使用return true跳出循环)
forEach 和 Array.map (不能跳出循环)

$nextTick() $forceUpdate的用法

• $nextTick()
  在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.$nextTick()的回调函数中
  在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.$nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。
• $forceUpdate
  迫使Vue实例重新（rander）渲染虚拟DOM，注意并不是重新加载组件。结合vue的生命周期，调用$forceUpdate后只会触发beforeUpdate和updated这两个钩子函数，不会触发其他的钩子函数。它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件；
  应用场景： 当在data里没有显示的声明一个对象的属性，而是之后给该对象添加属性，这种情况vue是检测不到数据变化的，可以使用$forceUpdate()
  了些什么

跨站脚本漏洞xss

https://www.jianshu.com/p/4fcb4b411a66
https://zhuanlan.zhihu.com/p/26177815

双向数据绑定原理

vue是采用数据劫持配合发布者-订阅者模式的方式，通过Object.definerProperty（）来劫持各个属性的setter和getter，在数据变动时，发布消息给依赖收集器，去通知观察者，做出对应的回调函数，去更新视图。

mvvm作为绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer，Compile之间的通信桥梁，达到数据变化=>视图更新；视图交互变化=>数据model变更的双向绑定效果。

image.png

vuex的数据流向是怎么样的

1.用户触发行为actions 通过this.dispach（或者可以直接commit方法）
2.通过commit Mutations中的方法 改变state中 的值
3.最后通过this.$store.state.id的方法将值映射到页面上

vue-router的底层原理

vue-router通过hash与History interface两种方式实现前端路由，更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式

1.hash ---- 利用URL中的hash（“#”）
2.利用History interface在 HTML5中新增的方法

在vue-router中，它提供mode参数来决定采用哪一种方式

• HashHistory
  HashHistory真是身怀绝技，会很多东西。特别是替换路由特别厉害。还可以通过不同的方式，一个是 push ，一个是 replace .
• HTML5History
  History interface是浏览器历史记录栈提供的接口，通过back(), forward(), go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。
  从HTML5开始，History interface有进一步修炼：pushState(), replaceState() 这下不仅是读取了，还可以对浏览器历史记录栈进行修改

axios的底层原理

axios 底层源码解析

promise的底层原理

webpack原理

发布订阅模式和观察者模式

发送ajax请求，浏览器做了什么

vue里边对于数组的处理，有bug（数组修改了，页面没有修改？数组有十个数据，然后让它=0，会怎么样？）

• 数组修改了，页面没有修改
  1.使用forceUpdate强制刷新
  2.使用数组方法，例如push，splice等等
  3.this.$set
  https://www.cnblogs.com/zigood/p/11274692.html
• 数组有十个数据，然后让它=0，会怎么样？
  数组不会实时更新

vue里面有什么抽取公共方法的操作，或者说实现公共方法的技术

写成公共方法插件

created 里面有this吗？有dom吗？可以操作dom吗？

created里面有this，就是vue
没有dom，那个时候还没生成dom
可以操作dom，但是需要写在$nextTick()里边

mounted里面有一个方法，created里面有一个方法，现在有三个组件要执行这两个方法，有什么解决方案？

mixin

keep-alive原理

深复制有什么方法，有什么bug

1.Object.assign()方法。ES6提供了Object.assign()方法用于深拷贝。(有bug）
bug：只实现一层深拷贝，如果里边还有下一级对象，就不会被拷贝
2.Json.parse(Json.stringify(obj))方式
bug：只能处理简单的属性和简单的属性数组，构造器信息会丢失
3.for
注意：需要用hasOwnProperty去判断key是否存在，以防止对象中的某个key调用自己，导致无限循环
https://blog.csdn.net/yiyan12/article/details/79447202

对象继承的方式有哪些

1、原型链继承
2、借用构造函数继承
3、组合继承（1、2）
4、原型式继承
5、寄生式继承
6、寄生组合式继承

在vue组件里边，css想改第三方的样式，但是我又想加scope，应该怎么办？

穿透>>>
Vue中的scoped及穿透方法，改变第三方组件库样式