Vue面试题相关知识点整理（1）- MVVM相关、data、生命周期相关、keep-alive

整理了一部分自己最近看的Vue面试相关知识点

目录

一、MVVM相关

1.1 MVVM 与 MVC 最大的区别

1.2 Vue 有没有完全遵循 MVVM 思想

二、为什么data需要是函数

三、生命周期相关

3.1 Vue2 中的生命周期有哪些

3.2 异步请求在生命周期哪个钩子发起

3.3 一旦进入到页面或者组件，会执行哪些生命周期，顺序

3.4 在挂载流程中哪个阶段有 $el，在哪个阶段有$data

3.5 如果加入keep-alive会多哪些生命周期

3.6 如果加入了keep-alive，第一次进入组件会执行哪些生命周期

3.7 如果加入了keep-alive，第二次进入组件会执行哪些生命周期

3.8 Vue父组件和子组件生命周期钩子函数执行顺序

四、keep-alive

4.1 keep-alive是什么

4.2 使用场景

---

一、MVVM相关

1.1 MVVM 与 MVC 最大的区别

MVC：即Model（模型）、View（视图）、Controller（控制器）的缩写。

MVVM：即Model（模型）、View（视图）、ViewModel（视图模型）的缩写

可以看出它们的区别为 Controller 和 ViewModel的部分：

• Controller：是应用程序用于处理用户交互的部分。通常控制器负责读取视图数据，控制用户输入要，并向模型发送数据。
• ViewModel：其意义和Model一样，在于数据（Model对数据进行存和取，但除了对数据的存取操作外，还有一个重要的操作：解析）。ViewModel 相当于把Controller中的数据加载、加工的功能分离出来

MVVM 与 MVC 之间最大的区别：MVVM 实现了 View 和 Model 的自动同步，也就是当Model的属性发生改变的时候，我们不需要去操作DOM元素来操作View显示。而是改变属性后，该属性对应的View层显示会自动跟随改变。

1.2 Vue 有没有完全遵循 MVVM 思想

Vue 并没有完全遵循MVVM思想。严格意义上来讲，MVVM 要求 Model 与 View 是不能直接通信的。而 Vue 上 有着 $ref 属性，可以让Model 直接地操作 View。因此 Vue 没有完全遵循MVVM思想。

二、为什么data需要是函数

这个说法主要是在组件中的。

因为组件是可以被复用的，而 js 中的对象是引用关系。那么data是对象的话 且该组件又作为公共组件共享使用时，一个地方中的data更改了，其他地方中复用该组件中的data也会因此而发生改变，组件中的data数据就会相互污染。

而组件中的data是函数的话，那么数据以函数返回值的形式定义，这样每次组件复用时，都会返回一个新的data，相当于每个组件实例都有自己私有的数据空间，组件实例间的data属性值不会相互污染。

（因为New Vue实例是不会被复用的，因此不存在引用对象问题）

三、生命周期相关

3.1 Vue2 中的生命周期有哪些

系统自带8个生命周期钩子函数：

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestory
8. destoryed

具体生命周期可看我的笔记：Vue知识点整理（一）- Vue核心（6）- 生命周期

3.2 异步请求在生命周期哪个钩子发起

可以在created、beforeMount、mounted这三个生命周期钩子发起异步请求，因为在这三个钩子函数中，data已经创建，可以将服务器端返回的数据进行赋值

如果异步请求不需要依赖DOM，推荐在created生命周期钩子函数中调用异步请求，因为在created生命周期钩子中调用异步请求，有以下优点：

• 能更快获取服务器端数据，减少页面loading时间
• ssr不支持 beforeMount、mounted 钩子函数，所以放在created有助于一致性

Vue官方文档 - SSR（简中）- 组件生命周期钩子

Vue官方文档 - SSR（英文）- Component Lifecycle Hooks

3.3 一旦进入到页面或者组件，会执行哪些生命周期，顺序

依次执行：

1. beforeCreate
2. created
3. beforeMount
4. mounted

3.4 在挂载流程中哪个阶段有 $el，在哪个阶段有$data

含有$el的阶段：mounted

含有$data的阶段：created、beforeMount、mounted

3.5 如果加入keep-alive会多哪些生命周期

activated 和 deactivated

activated 和 deactivated相关笔记可查看：Vue知识点整理（六）- vue-router（3）- 两个新的生命周期钩子

3.6 如果加入了keep-alive，第一次进入组件会执行哪些生命周期

（场景题：例如从A组件进入B组件执行了哪些生命周期）

依次执行：

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. activated

3.7 如果加入了keep-alive，第二次进入组件会执行哪些生命周期

（场景题：例如从A组件进入了B组件，再返回A组件时，返回A组件这个阶段执行了哪些生命周期）

只执行一个生命周期：activated，因为第一次进入时缓存了该组件，使该组件保持挂载，不被销毁。

3.8 Vue父组件和子组件生命周期钩子函数执行顺序

1. 加载渲染过程：

父 beforeCreate → 父 created → 父 beforeMount → 子 beforeCreate → 子 created → 子 beforeMount → 子 mounted → 父 mounted

2. 子组件更新过程：

父 beforeUpdate → 子 beforeUpdate → 子 updated → 父 updated

3. 父组件更新过程：

父 beforeUpdate → 父 updated 

4. 销毁过程：

父 beforeDestroy → 子 beforeDestroy → 子 destroyed → 父 destroyed 

四、keep-alive

4.1 keep-alive是什么

vue系统自带的一个内置组件，功能：用来缓存组件，提升性能

Vue官方文档 - API - 内置组件 - keep-alive

4.2 使用场景

缓存组件，提升项目的性能。具体实例，例如：首页进入到详情页组件中，如果用户在首页每次点击后发出的请求路径都是相同的，那么该详情页就没必要进行N次请求来获取页面信息，直接用keep-alive缓存起来就可以。如果点击后发出的请求路径不是同一个，那么就直接发出新的请求。