58道Vue常见面试题集锦，涵盖入门到精通

下面 58 道题从入门指令一路问到生命周期、路由和 Vuex，覆盖日常开发和面试高频点。题目全部保留，答案按原文知识点整理，方便对照自测。

建议先把基础指令、组件通信和双向绑定讲顺，再补工程化（vue-loader、懒加载、首屏）和状态管理。作者 Lucky Girl，原文见知乎专栏。

一、基础用法

1. vue 优点？

• 轻量级框架：只关注视图层，大小只有几十 kb
• 简单易学：国人开发，中文文档，没有语言障碍
• 双向数据绑定：保留 angular 的特点，数据操作更简单
• 组件化：保留 react 的优点，HTML 封装重用，单页应用有优势
• 视图、数据、结构分离：改数据即可，不必改逻辑代码
• 虚拟 DOM：不再直接原生操作节点，换一种方式操作 DOM
• 运行速度：同样操作虚拟 DOM，相对 react 有性能优势

2. vue 父组件向子组件传递数据？

通过 props。

3. 子组件向父组件传递事件？

$emit 方法。

4. v-show 和 v-if 指令的共同点和不同点？

共同点：都能控制元素显示和隐藏。

不同点：v-show 本质是改 CSS display: none，只编译一次；v-if 是动态增删 DOM，初始为 false 则不编译。频繁切换用 v-show（切换开销小、初始开销大）；不常切换用 v-if（初始开销小、切换开销大）。

5. 如何让 CSS 只在当前组件中起作用？

组件 style 上加 scoped。

6. keep-alive 的作用是什么？

<keep-alive></keep-alive> 是 Vue 内置组件，让被包含的组件保留状态，或避免重新渲染。

7. 如何获取 DOM？

ref="domName"，用法 this.$refs.domName。

8. 说出几种 vue 指令和用法？

v-model 双向绑定；v-for 循环；v-if / v-show 显示隐藏；v-on 事件；v-once 只绑定一次。

9. vue-loader 是什么？用途有哪些？

vue 文件加载器，把 template/js/style 转成 js 模块。js 可写 es6，style 可用 scss/less，template 可加 jade 等。

10. 为什么使用 key？

给每个节点唯一标识，Diff 才能正确识别。主要为了高效更新虚拟 DOM。

11. axios 及安装？

请求后台资源的模块。npm install axios --save，js 里 import，然后 .get 或 .post。成功走 .then，失败走 .catch。

12. v-model 的使用

v-model 用于表单双向绑定，是语法糖：背后是 v-bind 绑 value，再用 v-on 绑 input 事件。

13. vue-cli 项目 src 目录每个文件夹和文件的用法？

assets 放静态资源；components 放组件；router 定义路由；app.vue 应用主组件；main.js 入口文件。

14. 分别简述 computed 和 watch 的使用场景

• computed：一个属性受多个属性影响，典型是购物车结算
• watch：一条数据影响多条数据，例如搜索

15. v-on 可以监听多个方法吗？

可以。

16. $nextTick 的使用

改了 data 马上取 DOM 值，拿不到更新后的值。要用 $nextTick 回调，等渲染到 DOM 后再取。

17. vue 组件中 data 为什么必须是一个函数？

JavaScript 特性：component 里 data 必须是函数，每次复用返回一份新 data，实例各有私有空间。写成对象则所有实例共享一份，改一个全改。

18. 渐进式框架的理解

主张最少；可根据不同需求选择不同层级。

19. Vue 中双向数据绑定是如何实现的？

数据劫持 + 发布订阅，数据和视图同步。核心是 Object.defineProperty()。

20. 单页面应用和多页面应用区别及优缺点

SPA 只有一个主页面，开始加载必要的 html/js/css，跳转只刷新局部，多用于 PC。MPA 多个页面，跳转整页刷新。

SPA 优点：体验好、对服务器压力小、前后端分离、可做转场动画。缺点：不利于 SEO；导航要自己做前进后退；首屏耗时长；页面更复杂。

21. v-if 和 v-for 的优先级

一起用时 v-for 优先级更高，v-if 会在每次循环里跑。不推荐同时使用；若要用，v-if 应放到外层。

22. assets 和 static 的区别

相同点：都存放静态资源。

不同点：assets 会在 npm run build 时打包压缩，最终进 static 随 index.html 上传；static 不走压缩，直接进打包目录。static 体积更大但打包更快。

建议：业务样式和 js 放 assets；已处理过的第三方如 iconfont.css 放 static。

23. vue 常用的修饰符

• .stop：等同 event.stopPropagation()，防冒泡
• .prevent：等同 event.preventDefault()，取消默认行为
• .capture：捕获阶段，由外到内
• .self：只触发自己，不含子元素
• .once：只触发一次

24. vue 的两个核心点

数据驱动、组件系统。数据驱动靠 ViewModel 保证数据和视图一致；组件系统把 UI 看成组件树。

25. vue 和 jQuery 的区别

jQuery 用选择器选 DOM 再赋值、取值、绑事件，数据和界面在一起，例如 $("label").val()。Vue 通过 Vue 对象把数据和 View 分开，不必引用对应 DOM，靠 VM 互相绑定，也就是 MVVM。

二、工程与实践

26. 引进组件的步骤

template 里写组件；script 第一行 import 路径；components 里登记组件名。

27. delete 和 Vue.delete 删除数组的区别

delete 只把元素变成 empty/undefined，其他键值不变；Vue.delete 真正删掉并改变键值。

28. SPA 首屏加载慢如何解决

动态懒加载插件；使用 CDN 资源。

29. Vue-router 跳转和 location.href 有什么区别

location.href 简单但刷新页面；history.pushState 无刷新；router.push 用了 diff，按需加载。vue-router 在 history 模式下就是 pushState。

30. vue slot

父组件要在子组件里放一些 DOM，这些 DOM 显不显示、在哪显示、如何显示，由 slot 分发负责。

31. 你们 vue 项目是打包了一个 js、一个 css，还是多个文件？

按 vue-cli 脚手架规范，一个 js 文件，一个 CSS 文件。

32. Vue 里 router-link 电脑有用、安卓没反应怎么解决？

Android 上是 babel 问题，安装 babel polyfill 插件。

33. Vue2 中注册在 router-link 上事件无效

用 @click.native。router-link 会阻止 click，.native 表示直接监听原生事件。

34. RouterLink 在 IE 和 Firefox 不起作用（路由不跳转）

方法一：只用 a 标签，不用 button；方法二：button + Router.navigate。

35. axios 的特点有哪些

• 浏览器里创建 XMLHttpRequests
• node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求/响应数据
• 取消请求
• 自动转换 json

发送字段用 data 和 params：params 跟地址走，data 作为请求体。params 一般 get，data 一般 post/put。

36. 请说下封装 vue 组件的过程？

• 搭模板和样式，想清楚基本逻辑
• 定 props 的数据和类型
• 暴露该暴露的方法
• 封装完直接调用

37. params 和 query 的区别

query 用 path 引入，params 用 name 引入；取参分别是 this.$route.query.name 和 this.$route.params.name。query 像 get，地址栏看得到；params 像 post，地址栏看不到。query 刷新不丢，params 刷新会丢。

38. vue 初始化页面闪动问题

初始化前 div 不归 vue 管，容易看到 {{message}}。先在 css 加 [v-cloak] { display: none; }。还不彻底就在根元素加 style=”display: none;” 和 :style=”{display: ‘block’}”。

39. vue 更新数组时触发视图更新的方法

push()；pop()；shift()；unshift()；splice()；sort()；reverse()

40. vue 常用的 UI 组件库

Mint UI，element，VUX

41. vue 修改打包后静态资源路径

cli2：改 config/index.js 里 assetsPublicPath 为 ./

build: {
  // ...
  assetsPublicPath: './',
  // ...
}

cli3：根目录 vue.config.js：

module.exports = {
  publicPath: './', // 相对于 HTML 页面（目录相同）
}

三、生命周期函数面试题

42. 什么是 vue 生命周期？有什么作用？

每个实例创建时要走初始化：数据监听、编译模板、挂载 DOM、数据变化时更新 DOM。过程中会跑生命周期钩子，让你在不同阶段加代码。例如要在渲染完弹广告，最早可在 mounted。

43. 第一次页面加载会触发哪几个钩子？

beforeCreate，created，beforeMount，mounted

44. 简述每个周期具体适合哪些场景

beforeCreate： new 之后只有默认钩子和事件，data 和 methods 都还没初始化，不能用。

created： data 和 methods 已初始化，要调方法或改数据最早在这。

beforeMount： 内存里模板编译好了，还没挂到页面，页面仍是旧的。

mounted： 实例初始化完成，进入运行阶段。要操作页面 DOM，最早在这。

beforeUpdate： 页面还是旧数据，data 已是新的，尚未同步。

updated： 页面和 data 都是最新。

beforeDestroy： 进入销毁阶段，data、methods、指令、过滤器仍可用。

destroyed： 全部不可用，组件已销毁。

45. created 和 mounted 的区别

created：模板渲染成 html 前，适合初始化属性再渲染。mounted：渲染成 html 后，适合操作 DOM。

46. vue 获取数据在哪个周期函数

一般 created / beforeMount / mounted 都可以。要操作 DOM 必须 mounted。

47. 请详细说下你对 vue 生命周期的理解？

共 8 个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： beforeCreate 时 $el 和 data 都是 undefined；created 时 data 有了，$el 还没有。

载入前/后： beforeMount 时 $el 和 data 都初始化了，仍是虚拟节点；mounted 挂载完成，数据渲染出来。

更新前/后： data 变化触发 beforeUpdate 和 updated。

销毁前/后： destroy 之后改 data 不再触发钩子，事件监听和 DOM 绑定解除，但 DOM 结构还在。

四、vue 路由面试题

48. mvvm 框架是什么？

vue 是实现了双向绑定的 MVVM：视图变则模型变，模型变则视图变。

49. vue-router 是什么？它有哪些组件

写路由的插件。组件：router-link、router-view。

50. active-class 是哪个组件的属性？

vue-router 模块的 router-link 组件。子路由用 children 数组定义。

51. 怎么定义 vue-router 的动态路由？怎么获取传过来的值？

router/index.js 里 path 加上 /:id。用 router 对象的 params.id 取。

52. vue-router 有哪几种导航钩子？

三种。

第一种： 全局 router.beforeEach(to,from,next)，跳转前拦截。

第二种： 组件内的钩子。

第三种： 单独路由独享守卫。

53. $route 和 $router 的区别

$router 是 VueRouter 实例，script 里用 $router.push 导航，返回历史用 $router.go(-1)。

$route 是当前跳转对象，可取 name、path、query、params。

54. vue-router 的两种模式

hash 模式： 地址栏 URL 里的 #。

history 模式： HTML5 History 的 pushState / replaceState（需浏览器支持）。

55. vue-router 实现路由懒加载（动态加载路由）

第一种： vue 异步组件，一个组件一个 js。

第二种： 路由懒加载（import）。

第三种： webpack require.ensure()，相同 chunkName 会打成一个 js。

五、vuex 常见面试题

56. vuex 是什么？怎么使用？哪种功能场景使用它？

vue 的状态管理。在 main.js 引入 store 并注入。新建 store.js 再 export。场景：单页里组件间共享状态，如音乐播放、登录、购物车。

57. vuex 有哪几种属性？

五种：State、Getter、Mutation、Action、Module。

• state => 基本数据
• getters => 派生数据
• mutations => 同步改数据
• actions => 包一层 mutations，可以异步
• modules => 模块化 Vuex

58. Vue.js 中 ajax 应该写在组件 methods 还是 vuex 的 actions？

数据只在本组件用，不必进 vuex state。若别处要复用，请求放 action 方便复用。

以上面试题仅供个人学习，如有错误请指正。作者：Lucky Girl　https://zhuanlan.zhihu.com/p/92407628

一句话总结：58 题按「指令与通信 → 工程实践 → 生命周期 → 路由 → Vuex」串起来：先能讲清数据驱动和组件树，再补钩子顺序和状态该不该进 store。