前端面试锦集之 vue 面试总结

冷不防 2023-02-19 02:28 153阅读 0赞

#### 一、 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` 信息并跳转到登录页面，返回接口的错误信息

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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