--- highlight: atelier-estuary-dark theme: cyanosis --- ## 前言为了准备2023年春招，最近开始复习八股文。本文是我的前端面试系列的`Vue`篇，其他章节内容可点击链接查看： - [2023前端面试系列--HTML & CSS 篇 ](https://juejin.cn/post/7175048315111735352) - [2023前端面试系列-- JS 篇](https://juejin.cn/post/7176644710847479869) - [2023前端面试系列--网络篇](https://juejin.cn/post/7192869386955259959) - [2023前端面试系列-- webpack & Git篇](https://juejin.cn/post/7196630860811075642) ## Vue 常见面试题总结 ### MVVM模型？ MVVM，是`Model-View-ViewModel`的简写，其本质是`MVC`模型的升级版。其中 `Model` 代表数据模型，`View` 代表看到的页面，`ViewModel`是`View`和`Model`之间的桥梁，数据会绑定到`ViewModel`层并自动将数据渲染到页面中，视图变化的时候会通知`ViewModel`层更新数据。以前是通过操作`DOM`来更新视图，现在是`数据驱动视图`。 ### Vue的生命周期 Vue 的生命周期可以分为8个阶段：创建前后、挂载前后、更新前后、销毁前后，以及一些特殊场景的生命周期。Vue 3 中还新增了是3个用于调试和服务端渲染的场景。 | Vue 2中的生命周期钩子 | Vue 3选项式API的生命周期选项 | Vue 3 组合API中生命周期钩子| 描述| | :---: | :---: | :---: | :---: | | `beforeCreate` | `beforeCreate` | `setup()` | 创建前，此时`data`和 `methods`的数据都还没有初始化 | | `created` | `created` | `setup()` | 创建后，`data`中有值，尚未挂载，可以进行一些`Ajax`请求 | | `beforeMount` | `beforeMount` | `onBeforeMount` | 挂载前，会找到虚拟`DOM`，编译成`Render` | | `mounted` | `mounted` | `onMounted` | 挂载后，`DOM`已创建，可用于获取访问数据和`DOM`元素 | | `beforeUpdate` | `beforeUpdate` | `onBeforeUpdate` | 更新前，可用于获取更新前各种状态 | | `updated` | `updated` | `onUpdated` | 更新后，所有状态已是最新 | | `beforeDestroy` | `beforeUnmount` | `onBeforeUnmount` | 销毁前，可用于一些定时器或订阅的取消 | | `destroyed` | `unmounted` | `onUnmounted` | 销毁后，可用于一些定时器或订阅的取消 | | `activated` | `activated` | `onActivated` | `keep-alive`缓存的组件激活时 | | `deactivated` | `deactivated` | `onDeactivated` | `keep-alive`缓存的组件停用时 | | `errorCaptured` | `errorCaptured` | `onErrorCaptured` | 捕获一个来自子孙组件的错误时调用 | | — | `renderTracked` | `onRenderTracked` | 调试钩子，响应式依赖被收集时调用 | | — | `renderTriggered` | `onRenderTriggered` | 调试钩子，响应式依赖被触发时调用 | | — | `serverPrefetch` | `onServerPrefetch` | 组件实例在服务器上被渲染前调用 | **关于Vue 3中的生命周期建议阅读官方文档!!!!**
[组合式 API：生命周期钩子--官方文档](https://cn.vuejs.org/api/composition-api-lifecycle.html)
[选项式 API：生命周期选项--官方文档](https://cn.vuejs.org/api/options-lifecycle.html) **父子组件的生命周期：**
- `加载渲染阶段`：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted - `更新阶段`：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated - `销毁阶段`：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed ### Vue.$nextTick **在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。** `nextTick` 是 Vue 提供的一个全局 API，由于 Vue 的异步更新策略，导致我们对数据修改后不会直接体现在 DOM 上，此时如果想要立即获取更新后的 DOM 状态，就需要借助该方法。 Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue 将开启一个异步更新队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 `watcher` 被多次触发，只会被推入队列一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。`nextTick`方法会在队列中加入一个回调函数，确保该函数在前面的 DOM 操作完成后才调用。使用场景： 1. 如果想要在修改数据后立刻得到更新后的`DOM`结构，可以使用`Vue.nextTick()` 2. 在`created`生命周期中进行`DOM`操作 ### Vue 实例挂载过程中发生了什么？挂载过程指的是 `app.mount()`过程，这是一个初始化过程，整体上做了两件事情：`初始化`和`建立更新机制`。初始化会创建组件实例、初始化组件状态、创建各种响应式数据。建立更新机制这一步会立即执行一次组件的更新函数，这会首次执行组件渲染函数并执行`patch`将`vnode` 转换为 `dom`；同时首次执行渲染函数会创建它内部响应式数据和组件更新函数之间的依赖关系，这使得以后数据发生变化时会执行对应的更新函数。 ### Vue 的模版编译原理 Vue 中有个独特的编译器模块，称为`compiler`，它的主要作用是将用户编写的`template`编译为js中可执行的`render`函数。
在Vue 中，编译器会先对`template`进行解析，这一步称为`parse`，结束之后得到一个JS对象，称之为`抽象语法树AST`；然后是对`AST`进行深加工的转换过程，这一步称为`transform`，最后将前面得到的`AST`生成JS代码，也就是`render`函数。 ### Vue 的响应式原理 1. Vue 2 中的数据响应式会根据数据类型做不同的处理。如果是对象，则通过`Object.defineProperty(obj,key,descriptor)`拦截对象属性访问，当数据被访问或改变时，感知并作出反应；如果是数组，则通过覆盖数组原型的方法，扩展它的7个变更方法（push、pop、shift、unshift、splice、sort、reverse），使这些方法可以额外的做更新通知，从而做出响应。
缺点： - 初始化时的递归遍历会造成性能损失； - 通知更新过程需要维护大量 `dep` 实例和 `watcher` 实例，额外占用内存较多； - 新增或删除对象属性无法拦截，需要通过 `Vue.set` 及 `delete` 这样的 API 才能生效； - 对于`ES6`中新产生的`Map`、`Set`这些数据结构不支持。 2. Vue 3 中利用`ES6`的`Proxy`机制代理需要响应化的数据。可以同时支持对象和数组，动态属性增、删都可以拦截，新增数据结构均支持，对象嵌套属性运行时递归，用到时才代理，也不需要维护特别多的依赖关系，性能取得很大进步。 ### 虚拟DOM 1. 概念：
虚拟DOM，顾名思义就是虚拟的DOM对象，它本身就是一个JS对象，只不过是通过不同的属性去描述一个视图结构。 2. 虚拟DOM的好处：
(1) 性能提升
直接操作DOM是有限制的，一个真实元素上有很多属性，如果直接对其进行操作，同时会对很多额外的属性内容进行了操作，这是没有必要的。如果将这些操作转移到JS对象上，就会简单很多。另外，操作DOM的代价是比较昂贵的，频繁的操作DOM容易引起页面的重绘和回流。如果通过抽象VNode进行中间处理，可以有效减少直接操作DOM次数，从而减少页面的重绘和回流。
(2) 方便跨平台实现
同一VNode节点可以渲染成不同平台上对应的内容，比如：渲染在浏览器是DOM元素节点，渲染在Native（iOS、Android）变为对应的控件。Vue 3 中允许开发者基于VNode实现自定义渲染器（renderer），以便于针对不同平台进行渲染。
3. 结构：
没有统一的标准，一般包括`tag`、`props`、`children`三项。
`tag`：必选。就是标签，也可以是组件，或者函数。
`props`：非必选。就是这个标签上的属性和方法。
`children`：非必选。就是这个标签的内容或者子节点。如果是文本节点就是字符串；如果有子节点就是数组。换句话说，如果判断`children`是字符串的话，就表示一定是文本节点，这个节点肯定没有子元素。
### diff 算法 1. 概念：
`diff`算法是一种对比算法，通过对比旧的虚拟DOM和新的虚拟DOM，得出是哪个虚拟节点发生了改变，找出这个虚拟节点并只更新这个虚拟节点所对应的真实节点，而不用更新其他未发生改变的节点，实现精准地更新真实DOM，进而提高效率。
2. 对比方式：
`diff`算法的整体策略是：`深度优先，同层比较`。比较只会在同层级进行, 不会跨层级比较；比较的过程中，循环从两边向中间收拢。 - 首先判断两个节点的`tag`是否相同，不同则删除该节点重新创建节点进行替换。 - `tag`相同时，先替换属性，然后对比子元素，分为以下几种情况： - 新旧节点都有子元素时，采用双指针方式进行对比。新旧头尾指针进行比较，循环向中间靠拢，根据情况调用`patchVnode`进行`patch`重复流程、调用`createElem`创建一个新节点，从哈希表寻找 `key`一致的`VNode`节点再分情况操作。 - 新节点有子元素，旧节点没有子元素，则将子元素虚拟节点转化成真实节点插入即可。 - 新节点没有子元素，旧节点有子元素，则清空子元素，并设置为新节点的文本内容。 - 新旧节点都没有子元素时，即都为文本节点，则直接对比文本内容，不同则更新。 ### Vue中key的作用？ `key`的作用主要是`为了更加高效的更新虚拟 DOM`。 Vue 判断两个节点是否相同时，主要是判断两者的`key`和`元素类型tag`。因此，如果不设置`key` ，它的值就是 undefined，则可能永远认为这是两个相同的节点，只能去做更新操作，将造成大量的 DOM 更新操作。 ### 为什么组件中的 data 是一个函数？在 new Vue() 中，可以是函数也可以是对象，因为根实例只有一个，不会产生数据污染。在组件中，data 必须为函数，目的是为了防止多个组件实例对象之间共用一个 data，产生数据污染；而采用函数的形式，initData 时会将其作为工厂函数都会返回全新的 data 对象。 ### Vue 中组件间的通信方式？ 1. 父子组件通信：父向子传递数据是通过`props`，子向父是通过`$emit`触发事件；通过父链/子链也可以通信（`$parent`/`$children`）；`ref`也可以访问组件实例；`provide`/`inject`；`$attrs`/`$listeners`。 2. 兄弟组件通信：全局事件总线`EventBus`、`Vuex`。 3. 跨层级组件通信：全局事件总线`EventBus`、`Vuex`、`provide`/`inject`。 ### v-show 和 v-if 的区别？ 1. 控制手段不同。`v-show`是通过给元素添加 css 属性`display: none`，但元素仍然存在；而`v-if`控制元素显示或隐藏是将元素整个添加或删除。 2. 编译过程不同。`v-if`切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件；`v-show`只是简单的基于 css 切换。 3. 编译条件不同。`v-if`是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，渲染条件为假时，并不做操作，直到为真才渲染。 4. 触发生命周期不同。`v-show`由 false 变为 true 的时候不会触发组件的生命周期；`v-if`由 false 变为 true 的时候，触发组件的`beforeCreate`、`created`、`beforeMount`、`mounted`钩子，由 true 变为 false 的时候触发组件的`beforeDestory`、`destoryed`钩子。 5. 性能消耗不同。`v-if`有更高的切换消耗；`v-show`有更高的初始渲染消耗。使用场景：
如果需要非常频繁地切换，则使用`v-show`较好，如：手风琴菜单，tab 页签等；如果在运行时条件很少改变，则使用`v-if`较好，如：用户登录之后，根据权限不同来显示不同的内容。 ### computed 和 watch 的区别？ - `computed`计算属性，依赖其它属性计算值，内部任一依赖项的变化都会重新执行该函数，计算属性有缓存，多次重复使用计算属性时会从缓存中获取返回值，计算属性必须要有`return`关键词。 - `watch`侦听到某一数据的变化从而触发函数。当数据为对象类型时，对象中的属性值变化时需要使用深度侦听`deep`属性，也可在页面第一次加载时使用立即侦听`immdiate`属性。运用场景：
计算属性一般用在模板渲染中，某个值是依赖其它响应对象甚至是计算属性而来；而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。 ### v-if 和 v-for 为什么不建议放在一起使用？ Vue 2 中，`v-for`的优先级比`v-if`高，这意味着`v-if`将分别重复运行于每一个`v-for`循环中。如果要遍历的数组很大，而真正要展示的数据很少时，将造成很大的性能浪费。 Vue 3 中，则完全相反，`v-if`的优先级高于`v-for`，所以`v-if`执行时，它调用的变量还不存在，会导致异常。通常有两种情况导致要这样做： - 为了过滤列表中的项目，比如：```v-for = "user in users" v-if = "user.active"```。这种情况，可以定义一个计算属性，让其返回过滤后的列表即可。 - 为了避免渲染本该被隐藏的列表，比如```v-for = "user in users" v-if = "showUsersFlag"```。这种情况，可以将`v-if`移至容器元素上或在外面包一层`template`即可。 ### Vue 2中的set方法？ [`set`是Vue 2中的一个全局API](https://v2.cn.vuejs.org/v2/api/#Vue-set)。可手动添加响应式数据，解决数据变化视图未更新问题。当在项目中直接设置数组的某一项的值，或者直接设置对象的某个属性值，会发现页面并没有更新。这是因为`Object.defineProperty()`的限制，监听不到数据变化，可通过`this.$set(数组或对象，数组下标或对象的属性名，更新后的值)`解决。 ### keep-alive 是什么？ - 作用：实现组件缓存，保持组件的状态，避免反复渲染导致的性能问题。 - 工作原理：Vue.js 内部将 DOM 节点，抽象成了一个个的 VNode 节点，`keep-alive`组件的缓存也是基于 VNode 节点的。它将满足条件的组件在 cache 对象中缓存起来，重新渲染的时候再将 VNode 节点从 cache 对象中取出并渲染。 - 可以设置以下属性：
① `include`：字符串或正则，只有名称匹配的组件会被缓存。
② `exclude`：字符串或正则，任何名称匹配的组件都不会被缓存。
③ `max`：数字，最多可以缓存多少组件实例。
匹配首先检查组件的`name`选项，如果`name`选项不可用，则匹配它的局部注册名称（父组件 components选项的键值），匿名组件不能被匹配。如果同时使用了`include`、`exclude`，那么`exclude`的优先级高于`include`。设置了`keep-alive`缓存的组件，会多出两个生命周期钩子：`activated`、`deactivated`。
首次进入组件时：beforeCreate --> created --> beforeMount --> mounted --> activated --> beforeUpdate --> updated --> deactivated
再次进入组件时：activated --> beforeUpdate --> updated --> deactivated ### mixin `mixin`（混入），它提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。使用场景：不同组件中经常会用到一些相同或相似的代码，这些代码的功能相对独立。可以通过mixin 将相同或相似的代码提出来。缺点： 1. 变量来源不明确 2. 多 mixin 可能会造成命名冲突（解决方式：Vue 3的组合API） 3. mixin 和组件出现多对多的关系，使项目复杂度变高。 ### 插槽 `slot`插槽，一般在组件内部使用，封装组件时，在组件内部不确定该位置是以何种形式的元素展示时，可以通过`slot`占据这个位置，该位置的元素需要父组件以内容形式传递过来。`slot`分为： - `默认插槽`：子组件用``标签来确定渲染的位置，标签里面可以放`DOM`结构作为后备内容，当父组件在使用的时候，可以直接在子组件的标签内写入内容，该部分内容将插入子组件的``标签位置。如果父组件使用的时候没有往插槽传入内容，后备内容就会显示在页面。 - `具名插槽`：子组件用`name`属性来表示插槽的名字，没有指定`name`的插槽，会有隐含的名称叫做 `default`。父组件中在使用时在默认插槽的基础上通过`v-slot`指令指定元素需要放在哪个插槽中，`v-slot`值为子组件插槽`name`属性值。使用`v-slot`指令指定元素放在哪个插槽中，必须配合`