前端基础面试题（js+vue）

1. 数组去重的方法、循环的方法

双层for循环、set、map、filter、reduce、
for for in、forEach、for-of

2. async、await底层原理和如何处理错误信息

async/await是一种用于处理异步操作的Promise语法糖。以同步的方式编写异步操作的代码。通过使用async关键字声明一个函数为异步函数，并使用await关键字等待Promise的解析（完成或拒绝）。
函数被标记为async 时，内部使用 await 关键字，它会自动返回一个 Promise。如果 await 后面的表达式不是一个 Promise，它会被自动包装成一个 Promise。
当遇到 await 关键字时，函数的执行会暂停，直到 await 后面的 Promise 被解决。如果 Promise 被成功解决， await 表达式的值就是 Promise 的结果;如果 Promise 被拒绝，await 会抛出一个错误。
await 只能在 async 函数内部使用
如果await 后面的 Promise 被拒绝，会抛出一个错误，这个错误会被 try/catch 块捕获。

3. axios特点、如何发起请求、请求方式、取消结束请求

通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获取数据。
在node.js中可以发送请求，支持Promise，可封装统一设置拦截请求和响应数据

get获取、post提交、delete删除、put修改

CancelToken

4.div垂直居中-四种方法

// 1.flex布局
.box{ 
      background: green;  
      display: flex;
      justify-content: center;
      align-items: center;
    }
// 以下父元素都需要定位（除默认值，推荐relative）
//2.子元素未知宽高-平移缩放
.box{ 
      background: green;  
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
   }
//3.子元素已知宽高-定位
.box{   
       width: 200px;
       height: 200px;
       background: green;
       position: absolute;
       top: 50%;
       left: 50%;
       margin:-width/2    -height/2;
    }        
//4.子元素未知宽高-定位margin自适应
.box{   
       background: green;
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       margin:auto;
    }     

4.vue中怎么使用scss函数

1.在vue项目使用npm全局安装sass依赖包
2.在build文件夹下的webpack.base.conf.js的rules里面添加配置
3.组件添加样式 < style lang=‘scss’ >

5.登录注册页面流程是怎么完成的

1.客户端通过axios.post（url后端接口ip{参数：用户名，密码}）发送请求到服务器，登录成功后后端会产生token返回给客户端，
2.Cookies.set存入本地再储存在vuex的state里，封装axios请求拦截器在请求头上统一携带token。
3.vue项目全局配置vue-router，利用前置路由守卫，判断有无token，是否失效，失效后清楚本地token提示返回login登录页面

6.vue的组件传值

1.父子props $children2.子父$emit $parent ref命名链
3.兄弟event-Bus ref命名链
4.路由传值 通过query传值/params传值
5.vuex共享数据在store，封装的组合式action，组件中解构…mapActions(‘值’, [‘名’])

7.有没有用过vue.set/$set，什么时候用vue.set

vue2.0的缺陷----获取或设置数据是可以被拦截的，但是给对象动态添加属性的时候，视图是不会更新的，原因是添加新的值之后并不会将添加的值双向绑定，这时候就需要用vue.set

8.v-for的key作用/diff算法中key的作用

1.相同的key可以建立索引关系，也可以进行节点的复用
2. 减少虚拟dom对比可以提高性能
3. key尽量不要使用下标index，除非不更改列表

9.遍历1000条数据，可以用key吗

不能

10.promise静态方法，如何发起多个请求

promise.all()、promise.race()、promise.resolve()、Promise.reject
promise.all()、promise.race()

11.promise发起三个请求后数据是同时拿到的吗？

不是，浏览器是单线程的。
如果用promise.all，会在所有数据都拿到之后在进行业务操作

12.图片懒加载的原理

一张图片就是一个img标签，浏览器是否发起请求图片是根据img标签的src属性，所以实现懒加载的关键就是，图片没有进入可视区域时，先不给img的src赋值，这样浏览器就不会发起请求，等到图片进入可视区域再给src赋值

13.怎么封装一个v-model

绑定value属性和监听input属性

14.es6新增

1.Let const 块级作用域，let不具备变量提升，不具备重复声明，const声明的时候必须被赋值
2.箭头函数 不具备this指向改变，没有原型，没有arguments，使用call，apply，bind并不会改变箭头函数的this指向
3.函数参数默认值 ES6中允许你得函数参数设置默认值
4.字符串模板语法
5.for of 与 for in for of用于遍历一个迭代器 for in用来遍历对象中的属性
6.新增了class类的概念，类似于对象
7.promise 解决回调地狱问题 es8新增async await
8.解构赋值，ES6 允许按照一定模式，从数组和对象中题取值，对变量进行赋值，称为解构
9.展开运算符 | 剩余运算符
10.数组的高级方法 find findIndex array.from array.of fill
11. 模块化 利用import、export 来实现导入、导出
12.set 实现数组去重

15.如何将promise转换成同步？

利用ansyc和await转化为同步

16.改变原数组的方法？各自都有什么作用？

push尾增，pop尾删，unshift头增，shift头删，splice增删改，reverse逆转，sort排序

17.route和router的区别？

router是用来操作路由的，
常用页面跳转前进或返回，比如this.$router.push(),this.$router.go(),this.$router.back()
route是用来获取路由信息的。
主要属性是： $ route.path(路径)///$ route.params///$ route.query///$ route.router///$ route.name

18.watch中如何做到第一次进入就进行监听

watch默认第一次绑定进入页面时不会去监听，只有当属性值发生变化时才会进行执行。
immediate：true,立刻执行。

  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  }

deep:true，深度监听

 watch: {
      num: {
        handler(newValue, oldValue) {
          console.log(newValue, oldValue)
        },
        deep: true
      }
    }

计算属性computed和watch监视的使用和区别
computed 计算属性 就是为了简化 template 里面模板字符串的计算复杂度、防止模板太过冗余。它具有 缓存特性。
computed 用于监控自己定义的变量，该变量不在 data 里面声明，直接在 computed 里面定义，然后就可以在页面上进行双向绑定展示出结果或者用作其他处理；不能执行异步任务，必须同步执行。

watch 主要用于监控 vue 实例的变化，它监控的变量当然必须在 data 里面声明才可以，它可以监控变量或对象，适合用于一个数据影响多个数据，它不具缓存性。能执行异步任务，watch 也可以检测 computed 属性。
watch：监测的是属性值，只要属性值发生变化，其都会触发执行回调函数来执行一系列操作。
computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。

19. v-if与v-for的优先级谁高，一起使用会有什么问题

v-for的优先级高，v-if 将分别重复运行于每个 v-for 循环中
解决方法：外面嵌套一个父元素设置v-if，里面子元素设置v-for

20. vue中路由守卫有哪几种

①全局前置/后置守卫（作用域为项目所有路由组件）
router.beforeEach((to,from,next)=>{}) / router.afterEach((to,from)=>{})
组件内的守卫 （作用域仅限于该组件）
②beforeRouteEnter:(to,from,next)=>{} /beforeRouteLeave (to, from, next) {}
路由独享守卫（作用域仅限于该路由）
③ beforeEnter:(to,from,next)=>{} /beforeRouteUpdate (to, from, next) {} / afterEnter:(to,from)=>{}

21. vue生命周期哪个阶段操作dom

mounted阶段，数据已经挂载到dom上面，页面渲染完毕

22.事件循环中存在点击事件时怎么执行

1.同步代码，按顺序在call stack（调用栈）执行
2.遇到异步代码（点击事件），先记录下等待触发条件
触发后，就移动到callback queue（回调函数队列）
3.如果call stack里同步代码执行完必，Event loop（事件轮询）开始
循环查找callback queue，如有就移动到call stack中

23.行内标签的优先级

行内>内部=外联（就近原则，最后定义的优先级高）

24.flex布局中，左侧固定，右侧高度自适应怎么实现

①利用浮动，左边元素宽度固定 ，设置向左浮动。将右边元素的 margin-left 设为固定宽度。或者设置 overflow: hidden; 这样右边就触发了 BFC ，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。
②利用 flex 布局，左边元素固定宽度，右边的元素设置 flex: 1 。
③利用定位

25.JSON.parse()与JSON.stringify()

json.stringify()是把js对象转换成json字符串；
json.parse()是把json字符串转换成js对象。
简单来说两者的作用是相对的。

26.Vue中@click怎么阻止事件冒泡

@click.stop

27.Promise

Promise用于解决回调地域，异步编程的一种解决方案，它的构造函数是同步执行的，then 方法是异步执行的，所以Promise创建后里面的函数会立即执行，构造函数中的resolve和reject只有第一次执行有效，，也就是说Promise状态一旦改变就不能再变。
promise一共有3个状态：pending、fulfilled和rejected
Promise的九个方法：Promise.resolve Promise.reject Promise.then Promise.catch

28.防抖和节流

防抖：在一定时间范围内，如果同一事件多次被触发，只执行最后一次操作。
节流：在一定的时间间隔内，无论事件触发了多少次，都只执行一次操作。

29.重绘和回流

重绘：页面元素位置、大小等都不改变，只改变颜色或形状等外观样式。
回流：页面元素位置或大小或隐藏状态等发生改变时，重新渲染页面。
重绘不一定引起回流，回流必将引起重绘。