最近面试遇到的问题
1.Vue的两种路由模式
1.hash模式：原理是onhashchange事件，url都会被浏览器记录下来，只能改变#后面的url片段
2.history模式： 根据history api中的pushState,replaceState两个方法
2.v-if 和v-show有什么区别？
v-if 操作的实际上是dom元素的创建或销毁。
v-show 不管初始条件是什么，元素总是会被渲染，操作display:none/block属性。
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。频繁切换，使用 v-show ；条件很少改变，使用 v-if 。
3.async await 是什么？它有哪些作用？
async await 的作用就是 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。它可以很好的替代promise 中的then async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句
4.什么是闭包？ 闭包有哪些优缺点
一个作用域可以访问另一个函数内部的局部变量，可以延长作用域，但是容易造成内存泄漏，因为闭包中的局部变量永远不会被回收
function fn() {
var num = 10;
function fun() {
console.log(num);
}
return fun;
}
var f = fn();
f();
5.常见的数组方法
concat() 用于数组合并，返回新数组
indexof() 在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1
push() 数组末尾添加，改变原数组
pop() 数组末尾删除，改变原数组
unshift() 数组头部添加，改变原数组
shift() 数组头部删除，改变原数组
reverse() 数组颠倒，改变原数组
splice(index,删除位数,添加) 对数组进行删除修改，改变原数组
sort() 数组排序，改变原数组 array.sort(function(a,b){ return a-b; }); console.log(array) 升序 1,2,3,4,5
join() 数组转字符串 不改变原数组，返回转换后的字符串
isArray() 判断一个元素是否为数组
6.数组有哪几种循环方式？分别有什么作用？
every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
forEach() 方法对数组的每个元素执行一次提供的函数。
some() 方法测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个Boolean类型的值。
7.常用的字符串方法
cancat() 字符串拼接
trim() 去除左右空格
charAt() 从一个字符串中返回指定的字符
slice() 截取字符串的某个部分，返回新字符串
substring(start,end) 字符串截取 从start截取到end
split(’,’) 将字符串分隔为数组
8.什么是原型链
每个实例对象都有一个__proto__属性，当一个对象在查找一个属性的时候，自身没有就会根据__proto__向它的原型进行查找，如果没有，则向原型的原型继续查找，这样就形成了原型链
9.跨域实现方式
1.通过jsonp跨域
2.通过cors跨域
3.代理
10.性能优化
利用webpack进行合并压缩，动态渲染组件，CDN加载包，减少操作dom，图片预加载，路由懒加载
11.什么是递归
递归，就是在运行的过程中调用自己，结构清晰，可读性强，但是效率低，可能会栈溢出
12.js的执行机制
单线程，异步执行机制，分为同步任务和异步任务，先走同后走异，异步分为宏任务和微任务，先走微后走宏
13.数组去重
//利用filter
function unique(arr) {
return arr.filter(function(item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
var arr = [1,2,3,4,5,6,7,1,2,3,4,5,6,7]
console.log(unique(arr))
//利用双重for
var arr = [1,2,3,4,5,6,7,1,2,3,4,5,6,7]
function unque(arr) {
for(var i=0; i<arr.length; i++) {
for(var j=i+1; j<arr.length; j++) {
if(arr[i] === arr[j]) {
arr.splice(j)
}
}
}
return arr
}
console.log(unque(arr));
var arr = [1,2,3,4,5,6,7,1,2,3,4,5,6,7]
// 利用new Set()
function unque(arr) {
return [...new Set(arr)]
}
// function unque(arr) {
// return Array.from(new Set(arr))
// }
console.log(unque(arr));
14.es6新增方法
let,const方法，不存在变量提升，const不可改值，箭头函数，简化了定义函数的写法，新增了模块化、利用import 、export来实现导入、导出。新增了结构赋值，ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。新增了class类的概念，它类似于对象
15.vue中是怎么实现父向子、子向父、兄弟之间的传值的
父向子传值用props传值
子向父用$emit()
兄弟组件传值用事件总线
16.什么是同源策略？
所谓同源策略是浏览器的一种安全机制，来限制不同源的网站不能通信。同源就是域名、协议、端口一致
17.post和get 请求有哪些区别？
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制
18.http状态码分别代表什么意思？
1xx 表示HTTP请求已经接受，继续处理请求
2xx 表示HTTP请求已经处理完成(200)
3xx 表示把请求访问的URL重定向到其他目录(304资源没有发生变化，会重定向到本地资源)
4xx 表示客户端出现错误(403禁止访问、404资源不存在)
5xx 表示服务端出现错误
19.js的数据类型
js的数据类型分为：
基本数据类型（string、number、boolean、null、undefined、symbol）
复杂数据类型：array function
基本数据类型的特点：直接存储在栈中的数据
复杂数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里
20.什么vuex ,谈谈你对它的理解？
- 首先vuex的出现是为了解决web组件化开发的过程中，各组件之间传值的复杂和混乱的问题
- 将我们在多个组件中需要共享的数据放到store中，
- 要获取或格式化数据需要使用getters，
- 改变store中的数据，使用mutation，但是只能包含同步的操作，在具体组件里面调用的方式
this.$store.commit('xxxx') - Action也是改变store中的数据，不过是提交的mutation，并且可以包含异步操作，在组件中的调用方式
this.$store.dispatch('xxx')； 在actions里面使用的commit(‘调用mutation’)
21.防抖节流
防抖（debounce）
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;">div>
<script>
let num = 1;
let content = document.getElementById('content');
function count() {
content.innerHTML = num++;
};
content.onmousemove = count;
script>
非立即执行版意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
function debounce(func, wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}
}
content.onmousemove = debounce(count,1000)
立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果
function debounce(func,wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
let callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
}
节流（throttle）
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版
时间戳版:
function throttle(func, wait) {
let previous = 0;
return function() {
let now = Date.now();
let context = this;
let args = arguments;
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
}
}
content.onmousemove = throttle(count,1000)
定时器版:
function throttle(func, wait) {
let timeout;
return function() {
let context = this;
let args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
22.promise
1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列
详解： https://www.jianshu.com/p/1b63a13c2701
23.js内置对象
window窗口对象
document文档对象
Array数组对象
String字符串对象
Boolean布尔对象
Date日期对象
Error异常对象
Math数学对象
Arguments函数参数对象
Number数值对象
Function函数构造器对象
24.Vue内置指令
带有 v- 前缀的特殊属性， 职责是，当表达式的值改变时， 将其产生的连带影响，响应式地作用于 DOM。
1、v-bind：响应并更新DOM特性；例如：v-bind:href v-bind:class v-bind:title 等等，主要用法是绑定属性，动态更新HTML元素上的属性；
2、v-on：用于监听DOM事件； 例如：v-on:click v-on:keyup
3、v-model：数据双向绑定；用于表单输入等；例如：< input v-model= “message”>，用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。
4、v-show：条件渲染指令，为DOM设置css的style属性
5、v-if：条件渲染指令，动态在DOM内添加或删除DOM元素
6、v-else：条件渲染指令，必须跟v-if成对使用
7、v-else-if：判断多层条件，必须跟v-if成对使用；
8、v-text：更新元素的textContent；例如： 等同于 < span>{{msg}} ；
9、v-html：更新元素的innerHTML；会把标签名也带上。
10、v-for：循环指令
11、v-cloak：不需要表达式，这个指令保持在元素上直到关联实例结束编译； v-cloak 是一个解决初始化慢导致页面闪动的最佳实践 ；
12、v-once：也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。
首次渲染后，不再随数据的变化重新渲染，将被视为静态内容； v-once 在业务中也很少使用，当你需要进一步优化性能时，可能会用到。
13、v-pre：不需要表达式，跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度；
25.vue事件修饰符
.stop：阻止单击事件冒泡
.prevent：阻止默认事件
.capture：添加事件侦听器使用事件捕获模式
.self：只当事件在该元素本身(比如不是子元素)触发时触发回调
.once：事件只触发一次
26、v-for 循环为什么一定要绑定key ?
页面上的标签都对应具体的虚拟dom对象(虚拟dom就是js对象), 循环中 ,如果没有唯一key , 页面上删除一条标签, 由于并不知道删除的是那一条! 所以要把全部虚拟dom重新渲染, 如果知道key为x标签被删除掉, 只需要把渲染的dom为x的标签去掉即可!
27、组件中的data为什么要定义成一个函数而不是一个对象？
每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他