来时-归纳面试题

2022常见vue面试题：

1.处理异步的方式有哪些

答：
1.回到函数-通过计时器控制
2.ES6中Promise-通过微任务队列来驱动
3.async/await-异步事件用同步语法来处理。

2.JS有哪些数据类型

答：五种简单数据类型：
String、Number、Boolean、undefined、Null
可以通过typeof检测

3.使一个元素水平垂直居中的方式有哪些

答：
1.使用margin：0 auto
2.使用定位
3.使用绝对定位：position:absolute;left:0,top:0,bottom:0,right:0,margin:auto。
4.使用flex布局：display：flex，aligin-item：center，justify-content：center。
5.使用表格中属性：display：table-cell，text-align：center

4.http https区别

答：
1.https协议需要到ca申请证书，一般免费证书很少，需要交费。
2.http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议
3.http和https使用的是完全不同的连接方式用的端口也不一样,前者是80,后者是443。
4.http的连接很简单,是无状态的
5.HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议 要比http协议安全

5.组件间的通信方式有哪些

答：
1.props / $emit：父组件通过props向子组件传递，子组件向父组件传值：子组件里用emit，父组件用@event监听2.$attr / $listener
3.provide/inject：provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。
4.vue事件总线(V3移除)：但提供了两个库 mitt(ts) 或 tiny-emitter(js)来代替。
5.vuex

6.闭包

答：
1.闭包就是函数中套了一个函数，内层函数可以访问外层函数中的变量
2.优点：可以重复使用变量，不会造成变量污染
缺点：内存消耗很大，可能会导致内存泄露。

7.vshow vif区别

答：v-show-不管条件是不能true 都会被加载渲染 适合多切换操作
v-if-条件不为true，不能会渲染，适合少量切换操作

8.v-model实现双向绑定原理

答：用get获取值用set赋值

9.前端缓存机制

答：
1.cookie
2.session
3.localStorage
4.sessionStorage

10.V-for 为什么必须使用key

答：
1.key的主要作用就是用来提高渲染性能的！
2.key属性可以避免数据混乱的情况出现 （如果元素中包含了有临时数据的元素，如果不用key就会产生数据混乱）
为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

11.watch和computed区别和使用场景

答：
1.watch大多数来监听一个值来影响多个值的改变
2.computed通过多个值来改变这个值

12.实现响应式布局的方式有哪些

答：
1.媒体查询
2.百分比%
3.vw/vh
4.rem
5.flex弹性布局

13.css选择器有哪些，优先级？

答：
标签（元素）选择器、id选择器、类选择器、后代选择器、属性选择器、伪类选择器、通配符等。
优先级：!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认

14.如何清除浮动

答：1.清除浮动的方法有clearboth的方法
2.设置clearfix的方法
3.overflow的方法以及给父元素设置双伪元素的方法

15.异步

答：通过settimeout处理异步等

16.数组常用方法

答：
<<1.join (原数组不受影响)
<< 2.split(原数组不受影响)
<<3.push-该方法可以在数组的最后面,添加一个或者多个元素：arr.push(值)
<<4.pop-该方法可以在数组的最后面,删除一个元素：arr.pop(值)
<<5.unshift-该方法可以在数组的最前面,添加一个或者几个元素：arr.unshift(值)
<<6.shift-该方法可以在数组的最前面,添加一个元素： arr.shift(值)
<< 7.reverse翻转数组-arr.reserse()
<<8.sort-该方法可以对数组进行排序：数组的拼接与截取(原数组不受影响)

  arr.sort(function(a,b){
  return a-b;//从小到大排序
  return b-a;//从大到小排序
  })

<<9.concat-该方法可以把两个数组里的元素拼接成一个新的数组：返回值: 返回拼接后的新数组
<<10.slice-截取出来：

结构1:arr.slice(start,end) ;从start下标开始截取,一直到end结束,不包括end
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(0,3)//newArr = [0,1,2];

结构2:arr.slice(start) ;从start下标开始截取,一直到最后
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(2)//newArr = [2，3，4，5，6，7];

结构3:arr.slice( ) ;全部截取
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(2)//newArr = [0,1,2,3,4,5,6,7];
删除或增加元素(任意在任何位置,直接改变原数组,没有返回值)

<<11.splice-删除：

结构1: arr.splice(start,deletedCount) 纯删除
从start下标开始,删除几个

结构2: arr.splice(start,deletedCount,item) 替换
从start下标开始,删除几个,并在该位置添加item

结构3: arr.splice(start,0,item) 纯添加
从start下标开始,删除0个,并在该位置添加item,start开始全部往后移动
let arr = [1,2,6,7,8];
arr.splice(2,0,3,4,5);//arr = [1,2,3,4,5,6,7,8];
查找元素在数组中出现的位置

<<12.indexOf-该方法用来查找元素在数组中第一次出现的位置：arr.indexOf(元素)
<<13.lastIndexOf-该方法用来查找元素最后一次在数组中出现的位置

17.如何数组去重

答：利用set结构成员值唯一的特点：
var arr = [100, 20, 30, 50, 30, 100, 20, 50];//[100,20,30,50]
var arrSet = new Set(arr);
//arrSet即没有重复元素的数组

18.深拷贝浅拷贝

答：深拷贝-对对象中的子对象进行递归拷贝，拷贝前后的两个对象互不影响
浅拷贝-重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，只拷贝一层，不能对对象中的子对象进行拷贝

19.mvc mvvm区别

答：MVC：View是可以直接访问Model的，所以View里会包含Model信息以及一些业务逻辑
MVVM :双向绑定，ui访问dom 然后访问model

20.路由

答：路由钩子分为三种：
全局钩子： beforeEach、 afterEach、beforeResolve
单个路由里面的钩子： beforeEnter
组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

21.keep-alive

答：keep-alive可以在组件切换时,保存其包裹的组件的状态,使其不被销毁,防止多次渲染。
目的:可以使被包含的组件保留状态,或避免重新渲染

ES5新增的遍历数组方法：

1. forEach( )-该方法等同于for循环,没有返回值
   2.map( )-映射,该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等
2. filter( )-filter方法: 有返回值, 过滤出符合条件的元素
3. some-判断数组中有没有符合条件的项(只要有,就返回true),如果一个都没有,才返回false
4. every-判断数组中所有的项是否满足要求,如果全都满足,才返回true,否则返回false
5. find-找到符合条件的项,并且返回第一项
6. findIndex-找到符合条件的项的下标,并且返回第一个
   8.reduce-1.求和计算、2.扁平化数组(拼接数组)、3.对象数组叠加计算