vue----前端精选50道面试题---一个小白的孤芳自赏

1.vue的工作流程

       ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191031090220424.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3locjAzMjI=,size_16,color_FFFFFF,t_70)

2.vue-router导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

类型

全局的

      beforeEach - 前置钩子，进入之前干什么
      afterEach - 后置钩子，进去之后干啥玩意儿

单个路由的

     beforeEnter - 进入路由表中的某个路由前，干啥玩意儿

组件

     beforeRouteEnter - 进入某个组件前
     beforeRouteUpdate - 组件复用的时候触发
     beforeRouteLeave - 离开组件

3.详述keep-alive组件

   在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了.
   
  keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

keep-alive的机制
在运行的时候不调用销毁的生命周期，这样就可以做一个缓存，保留实列

4.v-show与v-if

基本差别
v-if动态创建标签，如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

   v-show通过css中的display来动态控制显示或隐藏，不管初始条件是什么，元素总是会被渲染

使用场景
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

 v-show一般会用在切换比较频繁
 v-if切换不频繁的

5.vue中key的作用

key值：用于 管理可复用的元素。因为Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做使 Vue 变得非常快，但是这样也不总是符合实际需求。

6.assets和static的区别

**assets：**assets用来放置样式，静态资源文件，主要存放src下边的资源

static: 用来放置没有npm包的第三方插件，列如：字体包

assets与components同级与APP.vue一样，引用静态资源时为相对路径

7.什么是跨域

是由浏览器同源策略限制的一类请求场景。

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：
1、Cookie、LocalStorage 和 IndexDB 无法读取
2、 DOM 和 Js对象无法获得
3、 AJAX 请求不能发送

常见跨域场景

URL                                      说明                    是否允许通信
http://www.demo.com/a.js
http://www.demo.com/b.js         同一域名，不同文件或路径           允许
http://www.demo.com/lab/c.js

http://www.demo.com:8000/a.js
http://www.demo.com/b.js         同一域名，不同端口                不允许
 
http://www.demo.com/a.js
https://www.demo.com/b.js        同一域名，不同协议                不允许
 
http://www.demo.com/a.js
http://127.0.0.1/b.js           域名和域名对应相同ip              不允许
 
http://www.demo.com/a.js
http://x.demo.com/b.js           主域相同，子域不同                不允许
http://demo.com/c.js
 
http://www.demo1.com/a.js
http://www.demo2.com/b.js        不同域名                         不允许

1.Nodejs中间件代理跨域
node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。

实现原理：同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略。
代理服务器，需要做以下几个步骤：
接受客户端请求 。
将请求 转发给服务器。
拿到服务器 响应 数据。
将 响应 转发给客户端。

2 设置请求头 在请求头设置“*”通配符，开放接口，

3.1.jsonp

1) **JSONP原理**
利用<script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。
2) **JSONP和AJAX对比**
JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX属于同源策略，JSONP属于非同源策略（跨域请求）
3) **JSONP优缺点**
JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。
4**) JSONP的实现流程**
声明一个回调函数，其函数名(如show)当做参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据(服务器返回的data)。
创建一个<script>标签，把那个跨域的API数据接口地址，赋值给script的src,还要在这个地址中向服务器传递该函数名（可以通过问号传参:?callback=show）。
服务器接收到请求后，需要进行特殊的处理：把传递进来的函数名和它需要给你的数据拼接成一个字符串,例如：传递进去的函数名是show，它准备好的数据是show('我不爱你')。
最后服务器把准备的数据通过HTTP协议返回给客户端，客户端再调用执行之前声明的回调函数（show），对返回的数据进行操作。

8.vue中子组件修改父组件传递过来的props，并不影响父组件的原始数据

子组件中不能修改父组件的状态，否则在控制台中会报错。
但是经我测试发现，这仅限于props为非数组及对象等引用类型数据，譬如字符串，数字等
如果props是对象或数组的话，在子组件内修改props的话，父组件是不会报错的。
那么要怎么解决修改props传的值而不污染父组件的值：

1，可以使用ES6提供的Object.assign({}, prop)的返回值就是一个全新的对象，操作这个新对象不会影响旧对象。如果不用ES6就自己递归实现拷贝器

2，可以给对象重新赋值：(给对象里的每一项重新赋值)

9.地址栏输入url按回车发生了什么

一：输入url,url的组成，有什么用?

通常最简单的url，就像这样：http://www.jianshu.com/，这串url就包含方案（就是通信协议，常见的http,https），服务器地址（www.jianshu.com），端口号（http协议默认是80端口，https协议默认是443端口，https就是加密的http协议，就是在http和TCP之间加了一层TSL或者SSL的安全层），资源（默认是index.html）。

二：通过url解析出ip地址

1.用户发起请求->操作系统把域名发送给本地区的域名服务器->有就解析返回ip，然后结束；

2.用户发起请求->操作系统把域名发送给本地区的域名服务器->没有->到Root Server的域名服务器请求解析->返回一个主域名（.com）的服务器地址地址->本地的域名服务器再向主域名服务器发起请求->返回Name Server域名服务器地址（jianshu.com）->接下来的解析就由域名提供商的服务器来解析->Name Server域名服务器查询存储的域名和ip的映射关系表->返回ip地址和一个过期时间，根据这个时间缓存到本地，解析结束。

## 三：ip地址解析完成之后，就开始发请求

[第一次：浏览器向服务器发送请求（SYN=1）,等待服务器确认；
第二次：服务器收到请求并确认，回复一个指令（SYN=1，ACK=1）；
第三次：客户端收到服务器的回复指令，并返回确认（ACK=1）；

## 四：服务器返回html文档之后，浏览器的渲染引擎开始dom解析过程（构建DOM树->渲染树（Render tree）->布局render树->绘制render树）

****10.什么是BFC,有什么作用？

“BFC”又称“格式化上下文”！

它是 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

bfc依赖于以下条件创造：

·根元素或其它包含它的元素
·浮动元素 (元素的 float 不是 none)
·绝对定位元素 (元素具有 position 为 absolute 或 fixed)
·内联块 (元素具有 display: inline-block)
·表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
·表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
·具有overflow 且值不是 visible 的块元素，
·display: flow-root
·column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
·一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

1.使 BFC 内部的浮动元素不会到处乱跑。
2.和浮动元素产生边界

11.手写promise简单封装ajax(原生的ajax)

//基于promise封装的ajax简单实现
function ajax({
  url="",
  type="get",
  dataType="json"
}){
return new Promise((resolve,reject)=>{
  let xhr=new XMLHttpRequest();
  xhr.open(type,url,true);
  //后台返回来的数据
  xhr.responseType=dataType;
  xhr.onload=function(){
    //xhr.resdState=4
    //xhr.resdState=200
    //成功后调用的方法
    resolve(xhr.response)
  }
  xhr.onerror=function(err){
    //失败后调用的方法
    reject(err)
  }
  xhr.send()
})
}
//调用方法
ajax({url:"www.wangyunfei__qianzhou.com"}).then((res)=>{},(err)=>{})

//最近一切都挺好 ，就是有点掉头发！！！
也不知道霸王好不好用，也没试过啊 ，改天试一试，等我给你们反馈，你们也用一用，毕竟秃发还是比较尴尬的！！

12.css link和@import区别用法

**1.link--><link href="CSSurl路径" rel="stylesheet" type="text/css" />**

**2.import-->** 
1）、在html中
<style type="text/css">
@import url(CSS文件路径地址);
</style>

2）、在css中
直接使用
@import url(CSS文件路径地址);

link与@import区别与选择

首页link和import语法结构不同，前者<link>是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能。import在html使用时候需要<style type="text/css">标签，同时可以直接“@import url(CSS文件路径地址);”放如css文件或css代码里引入其它css文件。
本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。

13.函数防抖与函数节流

函数防抖：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

函数节流：限制一个函数在一定时间内只能执行一次。

函数防抖的应用场景

连续的事件，只需触发一次回调的场景有：
搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流的应用场景
间隔一段时间执行一次回调的场景有：
滚动加载，加载更多或滚到底部监听
谷歌搜索框，搜索联想功能
高频点击提交，表单重复提交

函数防抖与函数节流的区别。函数防抖，将多次执行的事件合并成一次。函数节流，保持一段时间执行一次

相同点：

都可以通过使用 setTimeout 实现。
目的都是，降低回调执行频率。节省计算资源。

不同点：

函数防抖，在一段连续操作结束后，处理回调，利用 clearTimeout 和 setTimeout 实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
函数防抖关注一定时间连续触发，只在最后执行一次，而函数节流侧重于一段时间内只执行一次。

14.什么是事件委托

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。
好处呢：1，提高性能。

事件冒泡：事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。
事件捕获：事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。

事件委托的好处
1.提高JavaScript性能。事件委托可以显著的提高事件的处理速度,减少内存的占用
2.2、动态的添加DOM元素,不需要因为元素的改动而修改事件绑定。

三、事件委托的优点(全方位优化)
首先，我们看到添加的事件处理程序减少，可以只有一个事件处理程序。由于每个函数都是对象，对象会占用内存，内存的占用关系到性能。因此第一个优点是：

减少了内存占用，性能更好；

在访问DOM方面，也使得DOM访问次数减少。试想一下，如果要为许多的DOM元素绑定事件，自然需要多次访问DOM元素，设置事件处理程序所需时间更长，整个页面就绪需要的时间越多。因此第二个优点是：

设置事件处理程序所需时间更少，加快了整个页面的交互就绪时间。

假使我们将事件处理程序绑定到document对象上，只要可单击的元素呈现在页面上，就可以立即具备适当的功能。即还会有一个额外的优点：

document很快就可以访问，而且可以在页面生命周期的任何时点添加事件处理程序，而不用等待其他事件完成如DOMContentLoaded、load事件。

15.window.onload和$(document).ready(function(){})的区别

1、执行时间上的区别：window.onload必须等到页面内（包括图片的）所有元素加载到浏览器中后才能执行。而$(document).ready(function(){})是DOM结构加载完毕后就会执行。

2、编写个数不同：window.onload不能同时写多个，如果有多个window.onload，则只有最后一个会执行，它会把前面的都覆盖掉。$(document).ready(function(){})则不同，它可以编写多个，并且每一个都会执行。

此处是额外赠送！！！！

由于在“”(document).ready()方法内注册的事件，
只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完，例如与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很有可能图片还未加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。
要解决这个问题，可以使用JQuery中另一个关于页面加载的方法—load（）方法。load（）方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。如：$(window).load(function(){})=====window.onload = function(){}…

16.position的属性值

1. position: relative;相对定位
不影响元素本身特性
不会使元素脱离文档流
没有定位偏移量时对元素无影响
z-index
2. position: absolute;绝对定位
不影响元素本身特性
使元素完全脱离文档流
z-index
一般配合相对定位使用，父相子绝。
3. position: fixed;固定定位
fixed生成固定定位的元素，相对于浏览器窗 口进行定位。

4. position:static：默认值
默认布局。元素出现在正常的流中

5. position: sticky 粘性定位
粘性定位，该定位基于用户滚动的位置。

17.什么是回流，什么是重绘，怎么触发！

1.回流：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流

2.重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的

区别：
他们的区别很大：
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

如何减少回流重回做优化！
1.浏览器方面：浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

2.个人自己的优化：还有添加节点的时候比如要添加一个div里面有三个子元素p，如果添加div再在里面添加三次p，这样就触发很多次回流和重绘，我们可以用cloneNode(true or false) 来避免，一次把要添加的都克隆好再appened就好了

18.css中px,em,rem

1.px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2.em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
EM特点
-1. em的值并不是固定的；
-2. em会继承父级元素的字体大小。

rem特点
rem是CSS3新增的一个相对单位,这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是
p {font-size:14px; font-size:.875rem;}

19.清除浮动方式

1.在外部盒子内最下方添上带clear属性的空盒子
可以是div也可以是其它块级元素，把

放在盒内底部，用最下面的空盒子清除浮动，把盒子重新撑起来。
缺点：引入了冗余元素

2、用overflow:hidden清除浮动(触发BFC)
给外部盒子添上这个属性就好了，非常简单。
缺点：有可能造成溢出元素不可见，影响展示效果。

3。 其实还有一种最直接的办法：给每个盒子规定width和height，要多大给多大即可。但这并不算什么解决方案，因为这样的布局不是内容自适应的，但如果页面内容极少发生变动，这也是一个不错的方案，因为它的兼容性是毋庸置疑的。

4、用after伪元素清除浮动
给外部盒子的after伪元素设置clear属性，再隐藏它这其实是对空盒子方案的改进，一种纯CSS的解决方案，不用引入冗余元素。
.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: “”;}
.clearfix:after {clear: both;}
这也是bootstrap框架采用的清除浮动的方法。

20.readonly 和 disabled 的区别

readonly 不可编辑，但可以选择和复制；值可以传递到后台，通过request.getParameter(“name”)可以得到内容。只针对input(text / password) 和 textarea有效，

disabled 使文本框变灰，不可编辑，不能复制，不能选择；值不可以传递到后台，通过request.getParameter(“name”)得不到文本框中的内容，对于所有的表单元素都有效，

21.css优先级算法如何计算？ 有什么不同？

ID选择器的特殊性值，加0,1,0,0。
类选择器、属性选择器或伪类，加0,0,1,0。
元素和伪元素，加0,0,0,1。
通配选择器*对特殊性没有贡献，即0,0,0,0。
最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

层叠
假如特殊性相同的两条规则应用到同一个元素会怎样？css会先查看规则的权重（!important），加了权重的优先级最高，当权重相同的时候，会比较规则的特殊性，根据前面的优先级计算规则决定哪条规则起作用，当特殊性值也一样的时候，css规则会按顺序排序，后声明的规则优先级高

eval是做什么得

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码
语法：eval(string)

参数： string
要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。
返回值
通过计算 string 得到的值（如果有的话）。
【1】把字符串转化为json格式的字符串（js代码） 并使用

【2】有一定的性能消耗

线程和进程得区别

一、线程和进程基本概念

进程：操作系统分配的占有CPU资源的最小单位。拥有独立的地址空间。
线程：安排CPU执行的最小单位。同一个进程下的所有线程，共享进程的地址空间。

简单讲，计算机就像工厂，进程是个大车间，计算机内部有很多个这样的大车间。线程是工人，每一个车间里的工人至少有一个。

为什么这么画呢？有点一个挨一个的效果呢？是因为以前我就老是疑惑进程或者线程运行时到底是并行？还是串行？
其实，在单CPU或单核的情况下，宏观上无论是进程也好，线程也罢，都是并行的。而在微观下，某一个具体的时刻，他们实际上都是串行的。在多CPU或多核的情况下，才是真正意义的并行。

二、线程和进程的关系、通性

关系：进程中包含着至少一个线程。在进程创建之初，就会包含一个线程，这个线程会根据需要，调用系统库函数去创建其他线程。但需要注意的是，这些线程之间是没有层级关系的，他们之间协同完成工作。在整个进程完成工作之后，其中的线程会被销毁，释放资源。

通性：都包含三个状态，就绪、阻塞、运行。通俗的讲，阻塞就是资源未到位，等待资源中。就绪，就是资源到位了，但是CPU未到位，还在运行其他。

三、线程的好处

既然，线程和进程是存在通性的，那么为什么操作系统还要设置线程这个单位，那就说说线程的几点好处：
1、在一个程序中，多个线程可以同步或者互斥并行完成工作，简化了编程模型；
2、线程较进程来讲，更轻；
3、线程虽然微观并行。但是，在一个进程内部，一个线程阻塞后，会执行这个进程内部的其他线程，而不是整体阻塞。从某种意义上，提高了CPU的利用率。

四、市面上的通用叫法

单线程与多线程，都指在一个进程内的单和多。不要笑我，之前真的不懂。心中那只小羊驼，奔过来，跑过去。还抬起了傲娇的眼睛，看了我一眼，呵呵~~~

五、javaScript单线程执行机制

1、 首先解释下，单线程和多线程。
什么是单线程？单线程就是一个进程中只有一个线程。程序顺序执行，前面的执行完，才会执行后面的程序。
什么是多线程？多线程就是一个进程中只有多个线程。在进程内部进行线程间的切换，由于每个线程执行的时间片很短，所以在感觉上是并行的。

2、那么为什么感觉上javaScript是多线程？而且还支持AJAX异步呢？AJAX是真正的异步吗？
先说明，从哪里可以得出javaScript是单线程。比如你页面一上来就alert（“hello world~”）；只要你不关闭这个对话框，后续的js代码就不会再执行。因为，单线程就是这样一步一步的顺次执行，前面不执行完，后面不会执行。也就是说，在具体的某一时刻，只有一段代码在执行。
可是，JavaScript明明可以处理各种触发事件，感觉上是异步多线程啊。其实，它的原理是这样的，JavaScript单线程的执行浏览器的一个事件队列，要执行的函数和触发事件的回调函数都被放在这个队列中。比如，我点击率一下按钮，之后又将浏览器缩小了，那么这两个事件的回调函数就会顺次地被放在当前执行的“函数”之后，再一一执行。
那么，既然JavaScript是单线程，那么如何维护这个函数队列呢，他分身无术啊。这时候，就需要知道，浏览器可不是单线程。虽然，每一个window只有一个js引擎，但是浏览器是事件驱动的、异步的、多线程的。
浏览器内部有一个事件轮询（event loop），是一个大的内部消息循环，会轮询大的消息队列，并执行。也就是js要处理的事件队列，是浏览器维护的。
浏览器至少有四个线程（不同浏览器会有差异）： js引擎线程、界面渲染线程、浏览器事件触发线程、http请求线程。
其实，到这里就说的很明白了。但是，又想到了延时函数（setTimeout）的例子，感觉上，因为没有阻塞执行，会感觉是异步，其实并不是。只是，js在执行到延时函数时，会触发浏览器的定时器，到设置时间，浏览器再将这个函数放入执行的函数队列，再由JavaScript引擎执行。都是在浏览器空闲了才会执行。
关于AJAX的异步，是真正的异步。同样的道理，在调用AJAX的时候，浏览器会开辟一个新的线程，去处理这个请求，得到响应后，如果这个请求有回调，会将这个回调再放入事件队列中。再由JavaScript引擎执行。

3、关于JavaScript的阻塞
浏览器虽然是多线程，但是由于JavaScript具有阻塞特性，无论外链还是内嵌脚本，在浏览器执行解释js脚本的时候，浏览器是不会去做别的事情的，比如渲染页面，而是直到js下载并执行完毕。
这样，js脚本的下载、解释执行，会反该页面的继续绘制，给用户带来不良的体验。所以，要对其优化，有如下几点：
a、将