经历过的面试题

JS(含ES6)

1. 第一个宏任务中含有多个微任务，第二个宏任务也这样，问执行顺序

先执行宏任务 微任务会在第一个宏任务执行完之后再执行，之后是第二个宏任务

2. let、var、const的区别

var 可以重复声明一个变量，let不行
var挂在再windows下
const 声明了必须赋值 定义不可变的量，改变了就会报错

3.const既然不可变，那他内部的属性如果改变了呢

const p = {
      name:"123"
}
p.name = "1" // 这时属性可变
p = {
      name:"1"
} // 这时指针改变了 会报错

4.什么是闭包？手写一个闭包

可以访问外部函数的的内部函数

function fun1(){
      var a = "外部变量"
      function fun2(){
            console.log(a)
      }
      return fun2
}

5.call跟apply以及bind的区别

call 跟 apply 的区别在于 前者接受若干参数 后者 一个参数包含若干参数，这两者都会立即调用
bind会先新创建一个函数，然后想调用的时候在执行
三者都是改变this指向

6.set跟map用过吗，说一下作用

二者都是ES6语法
set 创建一个不重复的数组

map 转化为对象保存键值对

7.现在有个数组[1,2,3,3] 用set去重保留数组格式

var arr = new Set([1,2,3,3]) // 去重
var arr2 = Array.from(arr) // 设置为数组格式

8.for of 用过吗，可以用来循环什么

可迭代对象都可以使用
数组：
const arr = [1,2,3]
for (const value of arr){
      console.log(value) 
} 
// output
// 1
// 2
// 3

Map映射
const iterable = new Map([['one', 1], ['two', 2]]);
for (const [key,value] of iterable ) {
      console.log(`Key: ${key} and Value: ${value}`);
}
// Key: one and Value: 1
// Key: two and Value: 2

字符串就是一个个打印出来就不写了

9.ES6中的解构 const [a,...arr,b] = [1,2,3,4] 输出什么

坑，会报错

10.怎么判断是一个数组

type of 不能判断
1、可以使用js里的Array.isArray()
2、arr1 instanceof Array

11.复杂类型去重（带有集合）

1、利用for、forEach、filter遍历，再利用indexOf、includes等方法判断是否重复；
2、利用Set数据结构的特性；
3、利用obj或者map的key不能重复的特性。
// 这个方法可以去重复杂数组,包含NAN

let Array = [3, 1, [1], 1, [1], true, true, {}, '1', NaN, undefined, NaN, undefined, {}, null, null];	

function unique(arr) {
  let obj = {}
  return arr.filter((item, index) => {
     // 防止key重复
     let newItem = item + JSON.stringify(item)
     return obj.hasOwnProperty(newItem) ? false : obj[newItem] = true
  })
}
unique(Array)

11.axios里全局定义一个接口错误方法

响应拦截器定义一个就可以了
这篇文章写的很详细
https://blog.csdn.net/qq_36747046/article/details/97918242

vue

1.vue模板里的data为什么是属性不是方法

开始挖坑，其实vue里的data就是方法（这个社会简直险恶）
至于为什么是方法不是属性，组件指向都是data，如果是属性data修改所有组件都会修改（被共享了），所以必须是方法，每复用一次都会产生新的实例，
给组件创造私有的数据空间

2.vue里的虚拟dom跟双向绑定

虚拟dom:dom操作太多非常耗性能太耗费，render把template模板转化为虚拟dom.vue会在虚拟的节点模拟操作完 然后以最优的方式更新实际dom，优化了性能

数据双向绑定：Component组件 在渲染时候会根据他们依赖的data去触发set这就是读，vue会收集依赖，而data数据变动会触动getter，监听回调render函数进行重新渲染，这时候他们已经组件发生了变化，然后虚拟dom会去调用diff算法,找到本次DOM更新的节点，其他不改动的地方会原地还原，减少页面重绘最终更新成真实dom

3.keep-alive的生命周期 以及使用参数，数据怎么更新

生命周期
activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
deactivated:  页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

参数
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。


如果keep-alive长缓存要更新
要在activated去请求更新数据  create 跟 mounted不触发

4.如何监听一个复杂数据

监听方法中加入deep: true

5.有没有遇到过给对象添加完新的值之后，vue组件没有更新数据，怎么解决

1、使用$set操作 强制刷新
2、可能dom还没渲染好、nextTick方法在里面赋值能够异步更新，

6.vue 里面import() 这个是什么意思

// 路由按需加载
()=>import(`路由路径`)

6.attrs的作用，还使用过vue自带的API吗

attrs主要就是给儿孙组件传值方便，子组件在标签内写上v-bind="$attrs" 就可以把父组件的值传给儿孙组件
set 强制刷新
nextTick 可能dom还没渲染好、nextTick方法在里面赋值能够异步更新，

7.怎么进行深拷贝

JSON操作转换都可以作为深拷贝
json.parse(json.stringify)的弊端里面不要有方法对象
比如：
      date: [new Date(1536627600000), new Date(1540047600000)]

8.子组件调用父组件方法或父组件调用子组件方法

子组件调用父组件方法
1、直接在子组件中通过this.$parent.event来调用父组件的方法 event代表父组件的事件名
2、子组件$emit触发父组件的方法，父组件监听就行了
3、父组件把方法传入子组件中，在子组件里props接收用自身的方法调用这个接收方法（this.方法名()即可）


父组件调用子组件方法
1、子组件上定义ref="refName",  父组件的方法中用 this.$refs.refName.method 去调用子组件方法