最新最全的前端面试题集锦之 Vue 全家桶篇（从基础到高级，最新最全最详细解答）

该内容主要整理关于 Vue 的相关面试题，其他内容面试题请移步至 最新最全的前端面试题集锦 查看。
关于 Vue3.0 的相关面试题，请移步至 Vue3.0 篇 查看。

---

一、Vue经典面试题（附答案）

1. 什么是 MVVM？

MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成 UI 展现出来；ViewModel 是一个同步 View 和 Model 的对象。

在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

2. MVVM 和 MVC 区别？它和其它框架（jQuery）的区别是什么？哪些场景适用？

MVC 和 MVVM 其实区别并不大，都是一种设计思想。主要就是 MVC 中Controller 演变成 MVVM 中的 viewModel。MVVM 主要解决了 MVC 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

和其它框架区别：Vue 数据驱动，通过数据来显示视图层而不是节点操作。

场景：数据操作比较多、频繁的场景，更加便捷。

3. Vue 的优点是什么？

• 低耦合：视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
• 可重用性：可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
• 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel）；设计人员可以专注于页面设计。
• 可测试：界面素来是比较难于测试的，而现在测试可以针对 ViewModel来写。

4. Vue 组件之间的传值？

详细文档：Vue 之 父子组件通信与事件触发

• 父 => 子 通信
  • 父组件通过在子组件标签上绑定 :data = data 方式定义传值
  • 子组件通过 props 方法接受数据
• 子 => 父 通信
  • 子组件通过 this.$emit 方法传递参数

5. Vue 路由之间跳转？

详细文档：Vue 之 路由跳转传参方式详解

1. 声明式路由导航（）

2. 编程式路由导航（js的方式）

   this.$router.push()：跳转到指定 url 路径，并向 history 栈中添加一个记录，点击后退会返回到上一个页面 ==>> 队列的方式（先进先出）

   this.$router.replace()：跳转到指定 url 路径，但是 history 栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面) ==>> 栈的方式（先进后出）

   this.$router.back()：请求(返回)上一个记录路由

   this.$router.go(n)：向前或者向后跳转n个页面，n可为正整数或负整数

6. vue.cli 中怎样使用自定义组件？遇到过哪些问题？

1. 在 components 目录新建组件文件（indexPage.vue）
2. 在需要用的页面（组件）中导入该组件：import indexPage from 'src/components/indexPage.vue'
3. 注入到vue子组件的 components 属性上面，components:{ indexPage }
4. 在 template 视图 view 中使用该组件。

7. Vue 如何实现按需加载配合 webpack 设置？

webpack 中提供了 require.ensure() 来实现按需加载。

以前引入路由是通过 import 这样的方式引入，现在改为 const 定义的方式进行引入。

• 页面不按需加载引入方式：

  import home from '../../common/home.vue'
  

• 页面按需加载引入方式：

  const home = r => require.ensure( [], () => r (require('../../common/home.vue')))
  

8. keep-alive 组件有什么作用？

作用：包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

keep-alive 是 vue 的内置组件，而这个组件的作用就是能够缓存不活动的组件。一般情况下，组件进行切换的时候，默认是会进行销毁的，如果我们有需求，在某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用 keep-alive 来实现。

在 keep-alive 上有两个属性，可以对字符串或正则表达式进行匹配，匹配到的组件会被缓存。

• include 值为字符串或者正则表达式匹配的组件 name 会被缓存。（缓存匹配到的组件）
• exclude 值为字符串或正则表达式匹配的组件 name 不会被缓存。（排除匹配到的组件）

其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用 keep-alive 包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

9. 说下 Vue 生命周期钩子函数?

每个vue实例在被创建时都要经过一系列的初始化过程。
所有的生命周期钩子自动绑定 this 上下文到实例中，因此可以在函数中访问数据，对属性和方法进行运算。这意味着不能使用箭头函数来定义一个生命周期方法【这是因为箭头函数绑定了父上下文，因此this与你期待的 Vue 实例不同】。

vue的生命周期图：

阶段一：Vue实例创建阶段

• beforeCreate
  Vue实例在内存中刚被创建，this 变量还不能使用，数据对象（data）和方法（methods）未初始化，watcher 中的事件都不能获得到；

• created
  实例已经在内存中创建好，数据和方法已经初始化完成，但是模板还未编译，页面还是没有内容，还不能对 dom 节点进行操作（此时访问 this.$el 和 this.$refs.xxx 都是 undefined）

• beforeMounte
  找到对应的 template 模板，编译成 render 函数，转换成虚拟 dom，此时模板已经编译完成，数据未挂载到页面，也就是说在这个阶段你可以看到标签间的双花括号，数据还未渲染到页面中；

• render : h=>h(App)
  在 beforeMounte 之后和 mounted 之前，还有渲染 render 函数，它的作用是把模板渲染成虚拟 dom。

• mounted
  模板编译好了，虚拟 dom 渲染成真正的 dom 标签，数据渲染到页面，此时Vue实例已经创建完毕，如果没有其他操作的话，Vue实例会静静的躺在内存中，一动不动。
  一般会在 mounted 中来渲染从后端获取的数据。(页面初始化时，如果有操作 dom 的事件一般也会放在 mounted 钩子函数中。当然，也可以放在 create 中，前提需使用 this.$nextTick(function(){})，在回调函数中操作dom。)

阶段二：Vue实例运行阶段

• beforeUpdate
  数据依赖改变或者用 $forceUpdata 强制刷新时，对象 data 中的数据已经更改（虚拟 dom 已经重新渲染），但是 页面中的值还是原来，未改变，因为此时还未开始渲染 dom；

• update
  此时 data 中的数据和页面更新完毕，页面已经被重新渲染。

在实际开发中，一般会用监听器 watch 来代替上边2个方法，因为 watch 会知道是哪一个数据变化。

阶段三：Vue实例销毁阶段

• beforeDestroy
  实例销毁前使用，在此刻实例还是可用的。

• destroyed
  Vue实例被销毁，观察者、子组件、事件监听被清除（页面数据不会消失，只不过是响应式无效了）。

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

• 共同点：
  • 都是对元素进行显示隐藏；
• 不同点：
  • v-show 指令是通过修改元素的 display 的 CSS属性让其显示或者隐藏；
  • v-if 指令是直接销毁和重建 DOM 达到让元素显示和隐藏的效果；
  • 使用 v-show 会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if 更加合理。

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

将当前组件的