🖼️序言

对于前端来说， vuejs 是一大常考点。基本上只要候选人的简历上有涉及到 vue 的内容，那么面试官一般都会考察。那么，对于 vue 来说，我们需要从 vue2 到 vue3 来做一个基本的学习，以更好的应对面试官的各种刁难问题。

在下面的这篇文章中，将从 vue2 的基础知识，到 vue2 的原理知识，再到 vue3 的基础知识和原理知识做一个归纳和总结。同时，周一也将整理出相关的面试题，以供大家可以有一个更好的参考。

下面开始进入本文的讲解~

🎙️一、vue2.x基础知识预备

在了解常见的面试题之前，需要先对 vue 的基础知识有一个体系的了解。详细见下图👇

• 关于以上内容，已整理成博文，戳下方链接进入学习👇
  
• 原文：万字总结vue的基本使用和高级特性，周边插件vuex和vue-router
  
• 链接：juejin.cn/post/697604…
  

📻二、vue2.x基础知识常见面试题

基于以上知识点，我们将其细分为面试中的常考题。详细见下图👇

接下来对这些题进行一一解答。

1、请说出vue.cli项目中src目录每个文件夹和文件的用法？

├── assets 放置静态资源
├── components 放组件
├── router 定义路由的相关配置
├── views 视图
├── app.vue 应用主组件
├── main.js 入口文件
复制代码

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

如何使用：

• 在 components 目录新建你的组件文件（ smithButton.vue ）；
• 在需要用的页面中导入：import smithButton from '../components/smithButton.vue'；
• 注入到 vue 的子组件的 components 属性上，components:{smithButton}
• 在 template 视图 view 中使用；
• 流程：创建组件→导入组件→注入组件→使用组件

会遇到的问题：

smithButton 命名，使用的时候需要用 smith-button ，在创建时常用到驼峰命名，但在使用时需把驼峰转换为 - 表示；

vue 组件解决什么问题？

vue 组件可以提升整个项目的开发效率。能够页面抽象成多个相对独立的模块，解决了我们传统项目开发效率低、难维护、复用性等等问题。

3、v-show和v-if的区别

• v-show 通过 css 中的 display 来控制显示和隐藏；
• v-if 组件是真正的渲染和销毁，而不是显示和隐藏；
• 当频繁切换显示状态时，用 v-show ，否则用 v-if 。

4、为何v-for中要用key

• 必须使用 key ，且不能是 index 和 random ；
• 原因在于，在 vue 的 diff 算法中，通过对 tag 和 key 来判断是否为相同节点 sameNode ，如果是相同节点，则会尽可能的复用原有的 DOM 节点。
• 使用 key 的好处是：减少渲染次数，提升渲染性能。

5、描述Vue组件生命周期

（1）单组件生命周期

一般来说，组件生命周期的执行顺序为：挂载阶段 → 更新阶段 → 销毁阶段。下面给出常用组件生命周期的解析。

（2）父子组件生命周期关系

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
复制代码

子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated
复制代码

父组件更新过程

父beforeUpdate->父updated
复制代码

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
复制代码

6、Vue组件如何通讯（常见）

vue 组件常见的通讯方式有以下三种：

• 父子组件 props 和 this.$emit ；
• 自定义事件  event.$no 、 event.$off 和 event.$emit ；
• vuex 。

7、描述组件渲染和更新的过程

关于组件的渲染和更新过程，需要了解以下这张图。大家可以从 1-6 依次按顺序地对下图的整个过程进行细化和解读。

8、vue如何处理刷新数据不丢失

• 对 vuex 进行配置，将 vuex 的状态储存到 localStorage 中；
• 在页面加载时读取 localStorage 里的状态信息；
• 在页面刷新时将 vuex 里的信息保存到 localStorage 里；
• 在页面中将 vuex 里的信息使用 computed 接收。

9、双向数据绑定 v-model 的实现原理

• input 元素的 value = this.name ；
  
• 绑定 input 事件  this.name = $event.target.value ；
  
• data 更新后触发重新渲染 re-render ；
  
• 最核心问题：了解 v-model 在模板编译之后，产生的内容是什么。
  

10、computed 有何特点

• 具有缓存功能，当 data 不变时不会进行计算；
  
• 有效地提高性能。
  

11、为何组件data必须是一个函数

• export 看似是一个对象，但是 .vue 文件编译出来后是一个类；
  
• 在每一个地方（ data ， method ……）等等进行使用就是对 class 进行实例化；
  
• 我们在实例化的时候执行 data ；
  
• 如果这个 data 不是函数的话，那每一个组件的实例数据就都一样了，就共享了；
  
• 因此需要让它在闭包之中。
  

12、ajax请求应该放在哪个生命周期

• mounted 表示整个渲染完成， dom 也加载完成，因此 ajax 请求应该放在 mounted 生命周期中；
  
• 本质上 js 是单线程的，并且 ajax 是异步获取数据，是异步加载的一个机制；
  
• 如果将其放在 mounted 之前是没有用的，这样做只会让逻辑更加混乱；
  
• 原因在于，如果在 mounted 之前放 ajax 请求，那么这个时候 js 还没有渲染完成。且又因为 ajax 请求的数据还是异步的，因此即使是在 mounted 之前也不能加载，也不会有提前加载的效果。
  

13、如何将组件所有props传递给子组件？

• 父组件通过 $props 的而方式将自己的属性传递给子组件；
  
• 之后子组件通过 <User v-bind = "$props" /> 这种方式去接收父组件传递过来的参数。
  
• 注： 细节知识点，优先级不高
  

14、如何自己实现v-model

第一步，我们先定义一个子组件，名字叫 CustomVModel.vue ，具体代码如下：

<template>
    <!-- $emit是子组件往父组件传递数据 -->
    <input type="text"
        :value="text1"
        @input="$emit('change1', $event.target.value)"
    >
    <!--
        1. 上面的 input 使用了 :value 来绑定数据，而不是使用 v-model
        2. 上面的 change1 和 model.event 要对应起来
        3. 上面的 text1 与下面props的 text1 属性对应起来
    -->
</template>
<script>
export default {
    model: {
        prop: 'text1', // 对应下面 props 的 text1
        event: 'change1'
    },
    props: {
        text1: String,
        default() {
            return ''
        }
    }
}
</script>
复制代码

第二步，我们在父组件中使用上面的这个子组件：

<template>
    <div>
        <p>vue 高级特性</p>
        <hr>
        <!-- 自定义 v-model -->
        <p>{{name}}</p>
        <CustomVModel v-model="name"/>
    </div>
</template>
<script>
import CustomVModel from './CustomVModel'
export default {
    components: {
        CustomVModel
    },
    data() {
        return {
            name: 'Monday'
        }
    }
}
</script>
复制代码

通过上面的代码我们可以发现，通过绑定 value 属性和 input 事件这两个语法糖，最终实现数据的双向绑定。

此时我们看下浏览器的显示效果。

通过上图我们自己发现，结果跟实际的 v-model 结果是一样的。至此，我们就实现了自定义的 v-model ，以此来操作数据的双向绑定。

15、多个组件有相同的逻辑，如何抽离？

• 在 vue2.x 中，当多个组件有相同的逻辑时，可以使用 mixin 来进行逻辑抽离；
  
• 值得注意的是， mixin 存在有以下问题：

• 变量来源不明确，不利于阅读。
• 多个 mixin 可能会造成命名冲突。
• mixin 和组件可能出现多对多的关系，复杂度较高。

• 因此，要慎用 mixin ，且 vue3.x 已经出了 Composition API ，来解决 vue2.x 中存在的这些问题。
  

16、何时要使用异步组件

• 当加载大组件时，需要用到异步组件；
  
• 当 vue-router 路由要进行异步加载时，需要用到异步组件；
  
• 异步组件可以达到优化性能的效果。
  

17、何时使用keep-alive

• keep-alive 可以缓存组件，使得组件不需要重复渲染；
  
• 比如像多个静态 tab 页的切换；
  
• keep-alive 可以达到优化性能的效果。
  

18、何时需要使用beforeDestory

• 当解绑自定义事件 event.$off 时，需使用 beforeDestory 来对事件进行销毁操作；
  
• 当使用定时器绑定时间时，在定时器操作结束时，需要清除定时器；
  
• 解绑自定义的 DOM 事件，如 window scroll 等，需要在 beforeDestory 生命周期来对其进行事件解绑。
  

注意： 如果以上三者不做的话，很容易造成内存泄漏。

19、什么是作用域插槽

• 父组件模板的所有东西只会在父级作用域内编译；
• 子组件模板的所有东西只会在子集作用域内编译；
• 而作用域插槽想解决的问题就是，让父组件可以访问到子组件的数据。

20、vuex中action和mutation有何区别

• action 中可以处理异步， mutation 不可以；
  
• mutation 做原子操作，即做一个操作，比较原子的；
  
• action 可以整合多个 mutation ，可以理解为整理多个原子操作的集合。
  

21、vue-router常用的路由模式

• hash 默认
  
• H5 history （需要服务端支持）
  

• 已将路由模式整理成博客，具体戳下方链接👇
  
• 原文：浅谈前端路由原理
  
• 链接：juejin.cn/post/699384…
  

22、如何配置vue-router异步加载

• 在 vue-router 中，使用 import 来实现异步加载。

23、scope是怎么实现的

（1）scoped的实现原理：

• 给 DOM 节点加一个不重复的属性 data-v-5db9451a 来标志唯一性。
• 如果组件内部还有组件，只会给最外层的组件里的标签加上唯一属性字段，不影响组件内部引用的组件。

（2）vue中scoped的作用：

• 实现组件的私有化，当前 style 样式属性只属于当前模块，不污染全局。
• 但是当我们使用公共组件的时候会造成很多困难。

（3）谨慎使用：

• 父组件无 scoped 属性，子组件带有 scoped ，父组件是无法操作子组件的。
• 父组件有 scoped 属性，子组件无 scoped 。父组件也无法设置子组件样式。因为父组件的所有标签都会带有 data-v-5db9451a 唯一标志，但子组件不会带有这个唯一标志属性。
• 父子组件都有，同理也无法设置样式，更改起来增加代码量。

24、vue常用性能优化方式

• 合理使用 v-show 和 v-if
• 合理使用 computed
• v-for 时加 key ，以及避免和 v-if 同时使用
• 自定义事件、 DOM 事件及时销毁
• 合理使用异步组件
• 合理使用 keep-alive
• data 层级不要太深，尽量扁平
• 使用 vue-loader 在开发环境做模板编译（预编译）
• 合理使用 keep-alive
• webpack 层面的优化
• 使用 SSR

📟三、vue2.x原理知识预备

在了解常见的面试题之前，需要先对 vue2.x 的原理知识有一个体系的了解。详细见下图👇

• 关于以上内容，已整理成博文，戳下方链接进入学习👇
  
• 原文1：手把手教你剖析vue响应式原理，监听数据不再迷茫
  
• 链接1：juejin.cn/post/697827…
  
• 原文2：面试中的网红虚拟DOM，你知多少呢？深入解读diff算法
  
• 链接2：juejin.cn/post/697862…
  
• 原文3：模板编译template的背后，究竟发生了什么事？带你了解template的纸短情长
  
• 链接3：juejin.cn/post/697896…
  

📠四、vue原理知识常见面试题

基于以上知识点，我们将其细分为面试中的常考题。详细见下图👇

接下来对这些题目进行一一解答。

1、对MVVM的理解

所谓 MVVM ，即 Model-View-ViewModel 。

View 即 视图 ，也就是 DOM 。

Model 即 模型 ，可以理解为 Vue 中组件里面的 data 。

那么这两者之间，就通过 ViewModel 来做关联。而 ViewModel 可以做的事情有很多，比如说像监听事件，监听指令等。当 Model 层的数据发生修改时，就可以通过 ViewModel ，来把数据渲染到 View 视图层上。反之，当 View 层触发 DOM 事件时，就可以通过 ViewModel ，从而使得 Model 层实现数据的修改。

这就是 Vue 中的数据驱动视图，通过修改 Model 层的数据，来驱动到 View 的视图中来。

2、监听data变化的核心 API 是什么

• 所谓 vue 的响应式，即组件 data 的数据一旦变化，就会立刻触发视图的更新。实现数据驱动视图的第一步，需要了解实现响应式的一个核心 API ，即 Object.defineProperty 。
• 通过 Object.defineProperty ，我们可以实现对数据进行 get 和 set 操作，即获取数据和修改数据的操作，从而达到对数据进行响应式的监听。