前端面试题

1.vue组件通信

	有三种，一种是父子组件传参，一种是兄弟组件传参，一种是隔代组件传参
	 1. props/$emit适用于父子传值
	 2. EventBus公交传值  emit/on
	 3.parent/children访问父子
	 4.localStorage与sessionStorage组件传值
	 5.vuex数据管理传值
	 6.attrs/listeners隔代组件通信
	 7.provide/inject隔代组件通信
	 
				Vue组件之间的传值
			① 父组件向子组件：props
			②子组件向父组件：$emit
			③eventbus
			④vuex
			⑤缓存机制

2.vue双向数据绑定

			**1.vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
			
			2.核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；**

3.ajax请求的步骤

		1.创建一个XMLHttpRequest异步对象
		2.设置请求方式和请求地址
		3.接着，用send发送请求
		4.监听状态变化
		5.最后，接收返回的数据

4.垃圾回收机制

		垃圾回收（Garbage Collection，GC），顾名思义就是释放垃圾占用的空间，防止内存泄露。有效的使用可以使用的内存，对内存堆中已经死亡的或者长时间没有使用的对象进行清除和回收。
		确定回收对象有两个算法：引用计数法与可达性分析法。

####5.css性能优化
css性能优化主要是四个方面：
1. 加载性能
2. 选择器性能
3. 渲染性能
4. 可维护性、健壮性

6.跨域解决方式

	跨域：访问同源的资源是被浏览器允许的，但是如果访问不同源的资源，浏览器默认是不允许的，访问不同源的资源就是跨域。
	方式：
	 1.前端使用JSONP来解决跨域，但支持get请求
	 2. document.domain + iframe 跨域
	 3. location.hash + iframe
	 4. window.name + iframe 跨域
	 5. postMessage跨域
	 6. 跨域资源共享（CORS）
	 7. nginx反向代理
	 8. node.js中间件代理跨域
	 9. webScoke协议跨域

7.闭包的优缺点

	概念：闭包就是能够读取其他函数内部变量的函数，即定义一个在函数内部的函数，本质上，闭包是将函数内部和函数外部连接起来的桥梁。
	
	优点：
	 1. 逻辑连续，当闭包作为另一个函数调用参数时，避免脱离当前逻辑而单独编写额外逻辑
	 2. 方便调用上下文的局部变量。
	 3. 加强封装性，是第二点的延申，可以达到对变量的保护作用。
	 
	 缺点：
	 1.常驻内存，增加内存使用量
	 2.使用不当会很容易造成内存泄漏。

8.什么是深拷贝和浅拷贝

拷贝的两层含义，对应了浅拷贝和深拷贝的概念，做了第一层，就是浅拷贝的，做到第二层就是深拷贝。
1.浅拷贝：将原对象或原数组的引用直接赋值给新对象，新数组，新对象/数组只是原对象的一个引用。
2.深拷贝：创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”。
3.浅拷贝比深拷贝更快，浅拷贝相交于深拷贝，要更加欠缺一点。

9.原型和原型链的区别

原型：在javaScript中，每当定义一个函数数据类型（普通函数、类）时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。
原型链：在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的，对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语成为原型链

10.解构赋值

1. 数组，解构，按照一定模式，从数组和对象中提取值，对变量进行赋值。
2. 对象：数组的元素按次序排列的，变量的值有他的位置决定，而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
3. 字符串：字符串被换成一个类似数组的对象，类似数组的对象都有一个length 属性，因此可以对这个水性解构赋值。
4. 数值和布尔值：解构赋值时如果等号右边是数值的布尔值，则会先转化为对象。
5. 函数参数
6. 圆括号问题：1.变量声明语句
   2.函数参数
   3.赋值语句的模式
   用途：1.变量交换的值
   2.从函数返回多个值
   3.函数参数的定义
   4.提取json数据
   5.函数参数的默认值
   6.遍历map结构
   7.输入模块的指定方法

11. promise和async和await的区别

1. promise是es6里的，async是es7的
2. peomise原来有规范的意义
3. promise有很多并行神器，比如promise.all、promise.race.
4. promise链式操作，自己catch异常，async则要在函数内catch
5. promise是显示的异步，而async/await让你的代码看起来是同步的，你依然需要注意异步。
6. promise即使不支持es6，依然可以用promise的库或polyfil，而async就很难做。

12.箭头函数和普通函数的区别

1. 箭头函数没有prototype（原型），所以箭头函数本身没有this。
2. 箭头函数不会创建自己的this
3. Callapplybind无法改变箭头函数中的this的指向
4. 箭头函数不能作为构造函数使用
5. 箭头函数不能做Generator函数，不能使用yield关键字

13.理解keep-alive与普通组件的区别

keep-alive：当在组件之间切换的时候，有时会想保持这些组件的状态，以避免反复重复渲染导致的性能等问题，使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们。
普通组件：可以认为是构造函数，首字母大写，且构造函数中必须手动返回结果如果没有结果手动返回null。