vue面试题总结

写在前面

---

参考答案在看云平台发布，若是你们想阅读参考答案，可直接购买，

看云平台 50 个免费开通权限 已经使用完毕，感谢你们的支持！

有什么意见与建议欢迎您及时联系做者或留言回复！

---

Vue开发交流微信群：(二维码按期更新，长期有效！或添加群主微信hanxuming888进群)

本文档基于vue-cli技术栈总结了

• vue-cli工程
• vue.js核心知识
• vue-router路由
• vuex状态管理器
• axios等http请求
• 移动端适配
• Tab切换等经常使用功能
• vue与原生app混合交互
• vue生产环境部署
• vue各项技术源码解析
• MVVM设计模式
• vue-cli工程深刻拓展

等12个关于vue-cli开发的方面，共98道面试题。

不只能够帮你一次性详细阅读全部关于vue的面试题、更能够帮你拓展关于vue开发的视野。

关于vue的试题，看这一篇文档就够了！

---

vue-cli工程

---

一、构建的 vue-cli 工程都到了哪些技术，它们的做用分别是什么？

二、vue-cli 工程经常使用的 npm 命令有哪些？

三、请说出vue-cli工程中每一个文件夹和文件的用处

四、config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置

五、请你详细介绍一些 package.json 里面的配置

参考答案： https://www.kancloud.cn/hanxu...

---

vue核心知识点

---

一、对于Vue是一套渐进式框架的理解

二、vue.js的两个核心是什么？

三、请问 v-if 和 v-show 有什么区别

四、vue经常使用的修饰符

五、v-on能够监听多个方法吗？

六、vue中 key 值的做用

七、vue-cli工程升级vue版本

八、vue事件中如何使用event对象？

九、$nextTick的使用

十、Vue 组件中 data 为何必须是函数

十一、v-for 与 v-if 的优先级

十二、vue中子组件调用父组件的方法

1三、vue中 keep-alive 组件的做用

1四、vue中如何编写可复用的组件？

1五、什么是vue生命周期和生命周期钩子函数？

1六、vue生命周期钩子函数有哪些？

1七、vue如何监听键盘事件中的按键？

1八、vue更新数组时触发视图更新的方法

1九、vue中对象更改检测的注意事项

20、解决非工程化项目初始化页面闪动问题

2一、v-for产生的列表，实现active的切换

2二、v-model语法糖的组件中的使用

2三、十个经常使用的自定义过滤器

2四、vue等单页面应用及其优缺点

2五、什么是vue的计算属性？

2六、vue-cli提供的几种脚手架模板

2七、vue父组件如何向子组件中传递数据？

2八、vue-cli开发环境使用全局常量

2九、vue-cli生产环境使用全局常量

30、vue弹窗后如何禁止滚动条滚动？

3一、计算属性的缓存和方法调用的区别

3二、vue-cli中自定义指令的使用

参考答案： https://www.kancloud.cn/hanxu...

---

vue-router

---

一、vue-router如何响应 路由参数 的变化？

二、完整的 vue-router 导航解析流程

三、vue-router有哪几种导航钩子（ 导航守卫 ）？

四、vue-router的几种实例方法以及参数传递

五、vue-router的动态路由匹配以及使用

六、vue-router如何定义嵌套路由？

七、<router-link></router-link>组件及其属性

八、vue-router实现路由懒加载（ 动态加载路由 ）

九、vue-router路由的两种模式

十、history路由模式与后台的配合

参考答案： https://www.kancloud.cn/hanxu...

---

vuex

---

一、什么是vuex？

二、使用vuex的核心概念

三、vuex在vue-cli中的应用

四、组件中使用 vuex 的值和修改值的地方？

五、在vuex中使用异步修改

六、pc端页面刷新时实现vuex缓存

参考答案： https://www.kancloud.cn/hanxu...

---

http请求

---

一、Promise对象是什么？

二、axios、fetch与ajax有什么区别？

三、什么是JS的同源策略和跨域问题？

四、如何解决跨域问题？

五、vue-cli中如何使用JSON数据模拟？

六、vue-cli中http请求的统一管理。

七、axios有什么特色？

参考答案： https://www.kancloud.cn/hanxu...

---

UI样式

---

一、.vue组件的scoped属性的做用

二、如何让CSS只在当前组件中起做用？

三、vue-cli中经常使用的UI组件库

四、如何适配移动端？【 经典 】

五、移动端经常使用媒体查询的使用

六、垂直居中对齐

七、vue-cli中如何使用背景图片？

八、使用表单禁用时移动端样式问题

九、多种类型文本超出隐藏问题

参考答案： https://www.kancloud.cn/hanxu...

---

经常使用功能

---

一、vue中如何实现tab切换功能？

二、vue中如何利用 keep-alive 标签实现某个组件缓存功能？

三、vue中实现切换页面时为左滑出效果

四、vue中父子组件如何相互调用方法？

五、vue中央事件总线的使用

参考答案： https://www.kancloud.cn/hanxu...

---

混合开发

---

一、vue如何调用 原生app 提供的方法？

二、原生app 调用 vue 提供的方法，并将值传递到 .vue 组件中

参考答案： https://www.kancloud.cn/hanxu...

---

生产环境

---

一、vue打包命令是什么？

二、vue打包后会生成哪些文件？

三、如何配置 vue 打包生成文件的路径？

四、vue如何优化首屏加载速度？

参考答案： https://www.kancloud.cn/hanxu...

---

MVVM设计模式

---

一、MVC、MVP与MVVM模式

二、MVC、MVP与MVVM的区别

三、常见的实现MVVM几种方式

四、Object.defineProperty()方法

五、实现一个本身的MVVM（原理剖析）

六、 ES6中类和定义

七、JS中的文档碎片

八、解构赋值

九、Array.from与Array.reduce

十、递归的使用

十一、Obj.keys()与Obj.defineProperty

十二、发布-订阅模式

1三、实现MVVM的思路分析

参考答案： https://www.kancloud.cn/hanxu...

---

源码剖析

---

一、vue内部与运行机制：

• Vue.js 全局运行机制
• 响应式系统的基本原理
• 什么是 Virtual DOM？
• 如何编译template 模板？
• diff算法
• 批量异步更新策略及 nextTick 原理？
• proxy代理？

二、vuex工做原理详解

• Vue.mixin
• Vue.use

参考答案： https://www.kancloud.cn/hanxu...

---

深刻拓展

---

一、vue开发命令 npm run dev 输入后的执行过程

二、vue的服务器端渲染

三、从零写一个npm安装包

四、vue-cli中经常使用到的加载器

五、webpack的特色

参考答案： https://www.kancloud.cn/hanxu...