面试题（一）

一、vue的生命周期

beforeCreate：实例组件刚刚创建，元素和数据还没有初始化【】
created：数据data已经初始化完成，方法可以调用，但是dom未渲染，【data, methods】
beforeMount：DOM未完成挂载，数据也初始化完成，但是数据的双向绑定还是显示{{}}，这是因为Vue采用了Virtual DOM（虚拟DOM）技术，先占位，【data，methods，{{ }}】
mounted：数据和DOM都完成挂载，在上一个周期占位的数据把值渲染进去。可以在这边请求数据，不过，created请求会好一些。这个周期适合执行初始化需要操作DOM的方法。【data，methods，dom，数据渲染完成】
beforeUpdate：只要是页面上数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果数据没有改变不执行。
updated：只要是页面数据改变了都会出发，数据更新完毕，页面的数据是更新完成的。
beforeDestroy：
destroyed：

注：beforeUpdate和updated要谨慎使用，因为在每次更新数据的时候都会触发，在这里操作数据很影响性能，也容易死循环。

二、vue中数据获取在哪个阶段进行

可以放在created里面，也可以放在mounted里面。区别就是，在created中，无法操作dom，因为dom在此时，还没有渲染，而在mounted里面，data和dom都已经渲染完成。

三、vue中，有哪些通信方式

1、父组件与子组件通信

props

2、子组件与父组件通信

$emit

3、兄弟组件通信

bus

3、Vuex

四、vue脚手架

五、vuex机制

state:存储状态。也就是变量
getters：派生状态。也就是set、get中的set，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store。getters.personInfo()。和vue的computed差不多
mutations：提交状态修改。是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit()。和vue中的methods类似。
actions：和mutations类似，不过actions支持异步操作，第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch(‘nameAsyn’).
modules：store的子模块，内心相当于store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如store.a.getters.xxx().

六、浏览器有哪些存储方式

cookie、localStorage、sessionStorage，
cookie：用来保存客户浏览器请求服务器页面的请求信息
localStorage（本地存储）和sessionStorage（会话存储）是h5的WebStorage提供的API，
三者的共同点是保存在浏览器端，且同源
区别：
生命周期
cookei：可通过expires设置失效时间，不设置，默认关闭浏览器失效
localStorage：除非手动清除，否则永久保存
sessionStorage：仅在当前会话时候生效，关闭页面即失效
存储大小
cookie：4kb左右
localStorage、sessionStorage：可以保存5M的信息
HTTP请求
cookie：每次都携带在http头中，过多使用，会带来性能问题
localStorage、sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务端的通信
易用性
cookie：需要程序员自己封装，原生的的cookie接口不友好
localStorage、sessionStorage：原生接口可以接受，亦可再次封装来对Object和Array有更好的支持
应用场景
cookie：适合识别用户登录
localStorage和sessionStorage唯一的差别是是前者永久保存在浏览器里面，后者是关闭页面就清除了信息
localStorage：可以用来跨页面传递参数
sessionStorage：用来保存临时数据，防止用户刷新页面后，丢失参数

localstorage的使用

localStaorage.setItem('abc',123)	//设置abc
localStorage.getItem('abc')	//获取abc
localStorage.removeItem('abc')	//删除存储在localStorage中的 abc 项，也可手动清空浏览器信息

七、为什么会形成跨域

跨域：浏览器从以一个域名的网页去请求另一个域名的资源时，域名、端口、协议任何一个不相同，都是跨域
为什么会跨域：
在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。在请求的过程中，我们想要获取数据一般都是post/get请求，所以会出现跨域。
跨域问题来源于javascript的同源策略，即只有协议、主机名、端口号（如存在）相同，则允许互相访问。也就是说，javascript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对js和ajax的，html本身没有跨域问题。
解决方案：
cors：服务器设置允许，浏览器能够识别这个头

八、如何通过css，将盒子三等分

//html结构
<div class="container">
		<div class="childDiv"></div>
		<div class="childDiv"></div>
		<div class="childDiv"></div>
</div>

//法一：浮动布局+百分比
.container{
	overflow:hidden;
	zoom:1;
	width:500px;
	height:200px;
	border:1px solid red;
}
.childDiv{
	float:left;
	width:33.3%;
	height:100%;
	border:1px sold gray;
}
-----------------------------
//法二：行内元素（inline-block）+百分比
.container{
	font-size:0;
	overflow:hidden;
	width:500px;
	height:200px;
	border:1px sold lightblue;
}
.childDiv{
	display:inline-block;
	width:33.3%;
	height:100%;
	border:1px sold gray;
}
------------------------------------
法三：父元素 display：table + 子元素 display：table-cell
.container{
	width:500px;
	height:200px;
	display:table;
	border:1px solid lightblue;
}
.childDiv{
	display:table-cell;
	border:1px sold gray;
}

-----------------------
法四：css3 display：flex；（flex布局）
.container{
	width:500px;
	height:200px;
	display:flex;
	border:1px sold lightblue;
}
.childDiv{
	flex:1;
	border:1px sold gray;
}
-------------------------
法五：栅格系统（bootstrap）
给子元素添加 class 元素  `class="col-md-3"`

总结：以上五种方法都可实现父元素容器的三等分，但是前两种根据百分比的方法中，若子元素有边框，很难均分，优先使用后三种方法

九、promise

promise 是异步编程的一种解决方案，从他可以获取异步操作的消息，有三种状态，分别是进行中 pengding，已完成resolved，已失败rejected。
promise对象的特点：
（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

十、webpack配置

https://www.webpackjs.com/configuration/

十一、javascript 的promise

十二、vue中父组件如何调用子组件中定义的方法ue中父组件如何调用子组件中定义的方法

1.给子组件定义一个ref属性。eg:ref="childItem"

2.在子组件的methods中声明一个函数。eg: useInPar:function (str) {console.log(str)}

2. 在父组件的中声明一个函数，并通过this.$refs.childItem.userInPar来使用子组件中声明的函数。

十三、jQuery向父级元素最前面添加元素

append() - 在被选元素内部的结尾插入指定内容
prepend() - 在被选元素内部的开头插入指定内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

十四、不同路由间如何传递参数(待修改)

1、to 传参

//router.js
const router = new VueRouter({
	route : [
		{
			path: '/hellovue',
			name: 'HelloVue'
			component: () => import('/src/helloVue')
}

	]
})
//APP.vue
<router-link :to="{name:'HelloVue',params:{username:'tomcat'}}">hellovue页面</router-link>
//name是路由名称,params 是传递的参数,
//注：须由将 to 绑定 ===》 :to

//在hellovue.vue中接收参数
 <p>传递的名字是：{{$route.params.username}}</p>

2、使用 url 传参

//router.js 设置路由
const router = new Router({
  routes: [
    {
      path: '/tag/:id/:name',
      name: 'Tag',
      component: Tag,
    },
  ],
});

//app.vue 中
<router-link to='/tag/1/标签'></router-link>

//tag中获取
<span>{{$router.params.id}}</span>
<span>{{$router.params.name}}</span>
//this.$route.params.id
//this.$route.params.name

3、query 传参

//router.js 设置路由
const router = new Router({
  routes: [
  {
        path: '/log',
        name: 'SecurityLog',
        component: () => import('./views/Log.vue'),
        meta: {
          requiresAuth: true,
          active: '/security/log'
        }
      },
  ],
});

<router-link :to="{path: '/audit/log/', query: { operator_type: 1 }}"> </router-link>
//获取参数
this.$route.query.operator_type

params、query是什么？
params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params
query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

十五、闭包

函数外部如何使用函数内部的变量？
1、将函数内部的变量 return 出去

function bar(value){
	var testValue = 'inner';
	var result = testValue + value;
	return result;
}
console.log(bar('fun'))		//'funinner'

2、使用闭包
----函数外部需要使用函数内部变量的时候
什么是闭包？

function bar (value) {
  var testValue = 'inner'
  var result = testValue + value
  function innser () {
    return result
  }
  return innser()
}
console.log(bar('fun'))	//funinner

十六、深拷贝和浅拷贝

首先深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的。简单来说，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级。
浅拷贝拷贝的是对象的属性，两个对象指向同一个引用地址，改变其中一个对象，另一个对象也会改变；深拷贝是开辟了一块新的内存地址，将原对象的各个属性逐个复制进去。对拷贝对象和源对象各自的操作互不影响

方法1：json的parse和stringfy方法

var obj={
	a:1,
	b:2,
	c:3
}
var obj1=obj;
var obj2=JSON.parse(JSON.stringify(obj));
obj1.d=4;	
obj2.e=5;	
//obj={a:1,b:2,c:3,d:4},obj1=obj={a:1,b:2,c:3,d:4}
//obj2={a:1,b:2,c:3,e:5}

方法2：$.extend

var obj={
	a:1,
	b:2,
	c:3
}
var obj1=obj;
var obj2=$.extend(true,{},obj);
obj1.d=4;	
obj2.e=5;	
//obj={a:1,b:2,c:3,d:4},obj1=obj={a:1,b:2,c:3,d:4}
//obj2={a:1,b:2,c:3,e:5}

十七、vue中数据绑定的原理

十八、异步加载路由

const Editor = () => import('@/views/Editor')
const Editor = resolve => require(['@/views/Editor'], resolve)

十九、axios中如何处理公共方法（interceptors拦截器）

• http request拦截器

//添加请求前拦截
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

• http respones拦截器

axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
 ```javascript

二十、性能优化

1、减少需要传输的文件尺寸：文件压缩
2、减少发送的请求数量：字体图标，雪碧图
3、提高浏览器的下载并发数：js文件放在 html 文档最后
4、使用懒加载：如vue中懒加载路由
5、减少DOM操作，

二十一、输入 url ，到页面显示内容，浏览器做了哪些操作

1、域名解析

当我们在浏览器中输入一个URL，例如”www.google.com”时，这个地址并不是谷歌网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，因此我们输入的网址首先需要先解析为IP地址，这一过程叫做DNS解析。

DNS解析是一个递归查询的过程。例如，我们需要解析”www.google.com”时，会经历以下步骤：

• 在本地域名服务器中查询IP地址，未找到域名；
• 本地域名服务器回向根域名服务器发送请求，未找到域名；
• 本地域名服务器向.com顶级域名服务器发送请求，未找到域名；
• 本地域名服务器向.google.com域名服务器发送请求，找到该域名，将对应的IP返回给本地域名服务器。

2、TCP连接

HTTP协议是使用TCP协议作为其传输层协议的，在拿到服务器的IP地址后，浏览器客户端会与服务器建立TCP连接。该过程包括三次握手：

• 第一次握手：建立连接时，客户端向服务端发送请求报文
• 第二次握手：服务器收到请求报文后，如同意连接，则向客户端发送确认报文
• 第三次握手，客户端收到服务器的确认后，再次向服务器给出确认报文，完成连接。
  三次握手主要是为了防止已经失效的请求报文字段发送给服务器，浪费资源。

3、浏览器发送HTTP请求

浏览器构建http请求报文，并通过TCP协议传送到服务器的指定端口。http请求报文一共包括三个部分：

• 请求行：指定http请求的方法、url、http协议版本等请求头：描述浏览器的相关信息，语言、编码等。如下
  
• 请求正文：当发送POST, PUT等请求时，通常需要向服务器传递数据。这些数据就储存在请求正文中。

4、服务器处理HTTP请求

服务器处理http请求，并返回响应报文。响应报文包括三个部分：

• 状态码：http服务常用的状态码及其含义如下
  
• 响应头：包含了响应的相关信息，如日期等
  
• 响应正文：服务器返回给浏览器的文本信息，通常的html、js、css、图片等就包含在这一部分里面。

5、浏览器页面渲染

浏览器接受到http服务器发送过来的响应报文，并开始解析html文档，渲染页面。具体的渲染过程包括：构建DOM树、构建渲染树、定位页面元素、绘制页面元素等。具体可参看：浏览器时如何渲染页面的

6、断开TCP连接

客户端与服务器四次挥手，断开tcp连接。

• 第一次挥手：客户端想分手，发送消息给服务器
• 第二次挥手：服务器通知客户端已经接受到分手请求，但还没做好分手准备
• 第三次回收：服务器已经做好分手准备，通知客户端
• 第四次挥手：客户端发送消息给服务器，确定分手，服务器关闭连接

二十二、数组的方法

1、join() （数组转字符串）
2、push() 和（先数组末尾添加元素，返回新长度）
3、pop()（删除数并返回数组的最后一个元素）
4、shift() （删除数组的第一个元素，返回第一个元素）
5、sort() （排序）
6、reverse() （反转数组）
7、concat() （拼接两个或者多个数组）
8、slice() （数组截取）arr.slice(start , end);
9、splice() （数组更新：添加、删除）arr.splice(index , howmany , item1,.....,itemX)

二十三、数组去重的方法

参考之前整理的去重方法

二十四、jquery 如何定义一个类

二十五、git，svn的区别

二十六、vue,jquery跨域

二十七、h5 FlieReader

二十八、页面中的安全问题

账号密码加密、用户输入过滤

二十九、继承的方式有哪些

三十、各个循环方法的区别

 var arr=['a','b','c']
 for(var key in arr){
     console.log('obj'+key)	//1,2,3,这里循环数组，输出的key是下标，循环对象，输出的key是键名
 } 
 for(var value of arr){
     console.log(value)		//a,b,c
 } 

for…in 和 for…of 的区别
1）推荐在循环对象属性的时候，使用for…in,在遍历数组的时候的时候使用for…of。
2）for…in循环出的是key，for…of循环出的是value
3）注意，for…of是ES6新引入的特性。修复了ES5引入的for…in的不足
4）for…of不能循环普通的对象，需要通过和Object.keys()搭配使用,可终止循环
foreach
属于ES5的语法，能够同时获取到key value 数组本身
不能用break,continue语句跳出循环,不能跳过或者终止循环
不能函数内使用return语句

三十一、如何通过解构运算调换数组中的位置

[array[index1],array[index2]] = [array[index2],array[index1]];

三十二、v-if 和 v-show 的区别

相同点：都是控制元素的显示与隐藏

不同点：
1）v-if显示隐藏是将dom元素整个添加或删除，
而v-show隐藏则是为该元素添加css--display:none，dom元素还在页面中。
2）v-if 的渲染是惰性的，初始化为false时，不渲染，而v-show不管初始化条件是什么，都会进行渲染
3）v-if有更高的切换开销，而v-show有更高的初始化渲染开销。因此，如果需要非常高频的切换，使用 v-show较好，如果在运行时条件很少改变，则使用 v-if较好

三十三、v-for 循环中，为什么需要加 key

参考https://www.cnblogs.com/zhumingzhenhao/p/7688336.html
需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
key的作用主要是为了高效的更新虚拟DOM。

三十四、mvvm

十六、代码输出

1、
for (var i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i)		
  }, 1000)
}
//输出3个3,for 循环执行比较快，延迟1秒后，for 循环已经执行完毕，i=3

2、
console.log(a)
let a=2
//报错 a is not defined，因为 let 没有变量提升，打印 a 时，a 还未声明