Vue常见面试题 8月总结（含答案）-持续更新

1、vue的生命周期

• beforeCreated （创建前）

• created（创建后）

• beforeMount（载入前）

• mounted（载入后）

• beforeUpdate（更新前）

• updated（更新后）

• beforedestroy（销毁前）

• destroyed（销毁后）

2、Eval（）是全局对象的一个函数属性

• 它的功能就是吧对象的字符串解析成JS代码并运行，但应该避免使用eval，因为不安全，而且非常耗性能。

• 项目中Js代码是禁止使用的因为安全因素

3、对axios的封装

• 引用axios创建axios实例，axios.create.baseURl：‘地址’设置默认的请求超时时间，params放置参数

• 封装发请求通用的方法，因为是异步，用async await 解决，封装函数有三个参数（请求方法，路径，参数）

• 判断是请求方法，如果是get delete，参数params要放在一个大括号抱起来，然后。then接受结果，.catch接受失败的结果

• 如果是post put patch 请求的话，参数直接跟在path 后面即可，.then（res=>{接受成功的结果}）.catch（err=>{接受失败的结果})

• 请求拦截器，响应拦截器的封装，也可以封装并发请求

• 在main.js进行全局引入

4、项目中解决 token 失效的问题

• token 失效后，再次调用 接口的时候，会返回 401 的状态码

• 登录时后端会返回两个token一个token 一个refrese_token，存到本地存储中

• token失效的两种解决办法，强制用户跳转到登录页面进行登录，通过登录操作进行新token的获取

• 对于某次请求，返回401错误，我们使用refresh Token去获取新token，如果新token之前的请求参数在发一次请求

  • 更新本地的token以之前的请求参数再发一次请求

  • 如果新token请求失败，说明refresh Token也失效了，需要跳转到登录页面

5、开法过程中会遇到哪些内存泄漏的问题

• 当页面元素被移除或替换时，若绑定的事件没有被移除，在IE浏览器中不会作出恰当处理，需要我们手动移除

• 闭包的使用不当

6、New Vue（）做了什么，

• 内部执行了跟实例的初始化过程

• 具体包括以下操作：选项合并，$children，$refs, $slots, $createElement等实例属性和方法初始化，自定义事件处理，数据响应式处理，生命周期钩子函数调用，实例的挂载

• new Vue （）创建了根实例并准备好数据和方法，未来执行挂载时，此过程还会递归的应用于它的子组件上，最终形成一个有紧密关系的组件实例树

  new Vue({
  router,
  store,
  render:h=>(App)
  }).$mount('#app')
  //String() 返回的是基本数据类型，而new String（）创建的是对象

7、执行中的线程

• 主线程：也就是js引擎执行的线程，是单线程，页面渲染，函数处理都在这个主线程上

• 工作线程：也叫幕后线程，这个线程可能存在于浏览器或js引擎内，与主线程是分开的，处理文件读取，网络请求等异步事件

• 任务队列：所有的任务分为同步和异步，同步任务就是立即执行的任务，同步任务会在主线程中执行，异步任务：比如Ajax setTimeout，会通过任务队列的机制（先进先出）来执行

• 事件循环：任务进入执行栈，先判断是同步还是异步，同步进入主线程，异步放入任务队列，主线程内的任务执行完毕为空，就会去任务队列读取对应的任务，推入主线程执行，等全部执行完，再进去下一次循环，这就是事件循环。

8、Vue.nextTick的原理和用途

• vue中数据DOM的变化是异步的，发生下一个tick，这就是我们平时在开发过程中，比如从服务端获取数据，数据修改了之后，我们的某些方法依赖了数据修改后的DOM变化，我们就必须在nextTick后执行。

• 用法：将回调延迟到DOM更新循环之后执行，在修改数据时立即使用它，然后等待DOM更新，便可以达到获取、更新后节点目的

• 应用场景：如果在created（）进行DOM操作，由于此时还没有渲染DOM，所以一定要将DOM操作的js代码放在Vue.nextTick（）的回调函数中

• mounted 不会继承所有的子组件也都一起被挂载，如果你希望等到整个视图都渲染完毕，可以用vm.$nextTick替换mounted

9、JS是什么线程

• js是单线程：所以只有唯一的事件循环，js吧任务分为两种-同步任务，异步任务

  • 同步任务就是在主线程上排队执行的任务，只有在前面的任务执行完后，才能执行后面的任务

  • 而异步任务又分为两种，宏任务与微任务，异步任务是指不进入主线程，而是进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行

• 事件循环：是js的执行机制，是指同步任务进入主线程后，而异步任务进入任务队列，当异步事件完成后，会将回调函数放入任务队列中Event Queue中，当同步任务完成，会读取事件放入主线程执行，这个过程不断循环执行

10、 微任务和宏任务

• 执行栈遵循先进后出的原则

• 微任务：由js发起

• 宏任务：当前调用栈中执行的代码为宏任务（script整体代码，定时器等等）由宿主（浏览器或者node发起）

• 微任务：此次宏任务执行完，在下一个宏任务执行前需要执行的任务，可以理解为回调函数promise

• 宏任务中的事件放在回调函数中，有事件触发线程保护，微任务的事件放在微任务队列中，由JS引擎线程维护

• 运行机制：

• 在执行栈中执行一个宏任务

• 执行过程中遇到微任务，将微任务添加到微任务队列

• 当前宏任务执行完毕，立即执行微任务队列中的任务

• 当前微任务队列中的任务执行完毕，检测渲染页面线程接管任务渲染

• 渲染完成后，js线程接管，开启下一次事件循环，执行下一次宏任务

11、防抖节流

• 防抖：触发高频事件后N秒内之后执行一次，如果N秒内高频事件在此被触发，则重新计算时间

• 节流：高频事件触发，在N秒内之后执行一次，所以节流会稀释函数的执行频率，一段时间只执行一次

• 区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行 注：防抖是最后一个执行事件才会触发的函数

12、JS垃圾回收机制

• js具有自动垃圾回收机制，垃圾收集器会按照固定的事件间隔周期性执行

• js常见的垃圾回收方式：标记清除，引用计算方式

  • 标记清除方式：当变量进入运行环境中，会将变量标记为进入环境，离开变量时，则标记为离开环境，只要标记离开环境的就会被回收

  • 引用计算方式：工作原理：跟踪记录每个值被引用的次数

  • 声明变量并将一个引用类型的值赋值给这个变量，这个引用类型值的引用次数就为1，同一个值有又被赋值给另一个变量，这个引用类型的引用次数在加1，当包含这个引用类型值的变量又被赋值为另一个值，引用类型值的引用次数-1，当引用次数变为0的时候，垃圾机制就会将其回收释放内存

13、Promise与async-await有什么区别

• promise是一个异步编程的解决方案，减少了代码量，提高了代码可读性，有效解决了回调地狱问题，它可以链式调用

• async的用法，它作为一个关键字放到函数前面，调用该函数会返回一个promise对象如果只是async，promise差不多，但有了await就不一样了，await关键字只能放到async函数里面，await是等待的意思，其实它后面可以放任何表达式，不过我们更多的是放一个返回promise对象的表达式，它等待的是promise对象的执行完毕，并返回结果。

14、如何判断一个对象是否为数组，函数。

• 方法一：instanceof

  var arr = []
  console.log(arr instanceof Array)//true

• 方法二：constructor

  console.log(arr.constructor == Array)//true

• 方法三：Array.isArray

  console.log(Array.isArray(arr))//true

15、vue做过的性能优化

• 首屏加载优化

• 路由懒加载

• 启动CND加速

• 代码层面优化：合理使用v-if v-show， v-for遍历加key ，computed和watch区分使用场景

• 对于图片进行压缩

• 避免内存泄漏

• 减少ES6转ES5的冗余代码

16、vue插槽

• 都用过，插槽的话就是相当于预留了一个位置，可以将我们书写在组件内的内容放入，写一个插槽就会将组件的内容放入，写一个插槽就会将组件的内容替换一次，两次则为两次。为了自定义插槽的位置我们可以给插槽取名，它会根据插槽名来插入内容，一一对应

17、页面刷新时，vuex里面数据丢失解决方案

• 在vuex找那个的数据保存到了浏览器缓存当中

• 在页面刷新的时候再次请求远程数据，动态更新vuex数据

• 在父页面向后台请求远程数据，并在刷新之前将数据保存在sessionstorage中

• vuex数据持久化：vuex-persistedstate

18、递归的理解

• 有去有回，指在函数的定义中使用函数自身的方法

• 递归的三要素：

  • 明确递归终止条件

  • 给出递归终止是的处理方法

  • 提取重复的逻辑，缩小问题规模