vue 面试总结

一、 vue 面试题

1.axios 是什么？怎么使用？描述使用它实现登录功能的流程？它与 fetch、ajax 的区别是什么？答案如下：

• . axios 是基于 promise 用于浏览器和 node.js 的一个http客户端，主要用于向后台发起请求的，以及在请求中做更多的控制
• 支持 promise，提供了一些并发的方法，提供拦截器，提供支持 CSRF，跨站请求伪造
• axios 与 fetch 都是基于 promise 的语法，后者默认是使用 callback 的方式。fetch 本质上脱离 xhr 是新的语法，有自己的特性，默认不传 cookie，不要想 xhr 这样去监听请求的进度
• 登录功能的流程，http request 拦截器，判断是否存在 token，如果存在的话，则对每个 http header 都加上token。http response 拦截器，返回 401 清除 token 信息并跳转到登录页面，返回接口的错误信息

2.Vuex 是什么？怎么使用？哪种功能场景使用它？答案如下所示：

• Vuex 是一个专门为 vue 构建的状态集管理，主要是为了解决组件间状态共享的问题，强调的是集中式管理
• 主要是便于维护，便于解耦，所有不是所有的项目都适合使用 vuex，如果不是构建大型项目，使用 vuex，反而会使你的项目代码繁琐多余
• vuex 的核心是 state、mutations、getters、actions 和 modules

3.说出 4个 vue 当中的指令和它的用法，答案如下所示：

• v-if 条件渲染指令，代表存在销毁
• v-bind 绑定指令，用来绑定属性，简写方式是 ：
• v-on 坚持事件指令，简写方式是 @
• v-for 循环指令

4.导航钩子有哪些？它们有哪些参数？答案如下所示：

• 导航钩子就是路由的生命周期函数，vue-router
• 它分为两种，一种全局的，另一种是局部的
• 全局的钩子函数，beforeEach 是在路由切换开始时调用，afterEach 是在路由切换离开时调用
• 局部到单个路由，beforeEnter
• 组件的钩子函数，beforeRouterEnter、beforeRouterUpdate 和 beforeRouterLeave
• to 表示即将进入的目标对象，from 表示当前导航要离开的导航对象，next 表示是一个函数调用 resolve 执行下一步

5.v-model 是什么？vue 中标签怎么绑定事件？答案如下所示：

• vue 中利用 v-model 来进行表单数据的双向绑定
• 实际上只做了两步，v-bind 绑定了一个 value 的属性，利用 v-on 把当前的元素绑定到了一个事件上

6.Vue 组件封装的过程，如何封装一个 Vue 组件？答案如下所示：

• 封装组件主要就是为了解耦，通用组件必须具备高性能、低耦合的特性，往往在通用组件中留一个插槽
• 自定义组件 data 必须是一个函数，这是为了防止组件与组件之间声明的变量互相影响

7.swiper 插件从后台获取数据没问题，css 代码也没有问题，但是图片不动，应该怎么解决？答案如下所示：

• 主要原因是 swiper 提前初始化了，而这个时候数据还没有完全出来
• 解决方法有两个方向，一个从 swiper 入手，一个是从 vue 入手
• vue 中专门提供了一个方法 nextTick(), 用于解决 dom 的先后执行问题

8.vue 路由懒加载的理解，答案如下所示：

• 路由懒加载，也叫延迟加载，即在你需要的时候加载

9.vue-loader 的理解，答案如下所示：

• vue-loader 就是一个加载器，能把 vue 组件转化成 Javascript 模块
• 转义这个 vue 组件，可以动态的渲染一些数据
• 优化了 script 中可以直接使用 ES6、Style，也默认可以使用 sass，还提供了作用域的选择
• 在开发阶段中，还提供了热加载

10.用过插槽吗？用的是具名插槽还是匿名插槽？答案如下所示：

• 在 vue 中，插槽包括三种，分别是默认插槽( 匿名插槽)、具名插槽和作用域插槽。
• 匿名插槽是没有名字的，只要是默认的，都会填到这里，而具名插槽是具有名字的

11.说说你对于 vue 中虚拟 DOM 的理解，答案如下所示：

• 虚拟 DOM 就是以 JS 对象形式去添加 DOM 元素
• 本质上是优化了 diff 算法，采用了新旧 DOM 的对比获取差异的 DOM，一次性更新到真实的 DOM 上
• 虚拟 DOM 本身也有自己的缺陷，适合批量修改 DOM，尽量不要跨层级修改 DOM，设置 key, 可以最大的利用节点

12.如何理解 Vue 中的 MVVM 模式，答案如下所示：

• MVC 是指 model、view 和 controller
• MVVM 是指 model、view 和 viewModel，vue 是专注于 view 和 viewModel 这样的框架

13.Vue 中的 keep-alive 的作用，答案如下所示：

• keep-alive 能够让不活动的组件 “活着”，提供了 include 和 exclude 两个属性允许组件有条件的缓存
• 实现的原理是在 created 的时候将需要缓存的 vnode 节点放到 cache 中，在 render 的时候根据 name
  再进行取出来