面试官：说说你对Vue生命周期的理解?

柔光的暖阳◎ 2022-12-25 07:55 149阅读 0赞

![format_png][]

## 一、生命周期是什么    ##

生命周期`（Life Cycle）`的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”`（Cradle-to-Grave）`的整个过程

在`Vue`中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程

我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作

PS：在`Vue`生命周期钩子会自动绑定 `this` 上下文到实例中，因此你可以访问数据，对 `property` 和方法进行运算

这意味着**你不能使用箭头函数来定义一个生命周期方法** (例如 `created: () => this.fetchTodos()`)

## 二、生命周期有哪些 ##

Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期

<table> 
 <thead> 
  <tr> 
   <th>生命周期</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeCreate</td> 
   <td>组件实例被创建之初</td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>组件实例已经完全创建</td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td>组件挂载之前</td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td>组件挂载到实例上去之后</td> 
  </tr> 
  <tr> 
   <td>beforeUpdate</td> 
   <td>组件数据发生变化，更新之前</td> 
  </tr> 
  <tr> 
   <td>updated</td> 
   <td>数据数据更新之后</td> 
  </tr> 
  <tr> 
   <td>beforeDestroy</td> 
   <td>组件实例销毁之前</td> 
  </tr> 
  <tr> 
   <td>destroyed</td> 
   <td>组件实例销毁之后</td> 
  </tr> 
  <tr> 
   <td>activated</td> 
   <td>keep-alive 缓存的组件激活时</td> 
  </tr> 
  <tr> 
   <td>deactivated</td> 
   <td>keep-alive 缓存的组件停用时调用</td> 
  </tr> 
  <tr> 
   <td>errorCaptured</td> 
   <td>捕获一个来自子孙组件的错误时被调用</td> 
  </tr> 
 </tbody> 
</table>

## 三、生命周期整体流程 ##

`Vue`生命周期流程图

![format_png 1][]

#### 具体分析 ####

**beforeCreate -> created**

*  初始化`vue`实例，进行数据观测

**created**

*  完成数据观测，属性与方法的运算，`watch`、`event`事件回调的配置
 *  可调用`methods`中的方法，访问和修改data数据触发响应式渲染`dom`，可通过`computed`和`watch`完成数据计算
 *  此时`vm.$el` 并没有被创建

**created -> beforeMount**

*  判断是否存在`el`选项，若不存在则停止编译，直到调用`vm.$mount(el)`才会继续编译
 *  优先级：`render` > `template` > `outerHTML`
 *  `vm.el`获取到的是挂载`DOM`的

**beforeMount**

*  在此阶段可获取到`vm.el`
 *  此阶段`vm.el`虽已完成DOM初始化，但并未挂载在`el`选项上

**beforeMount -> mounted**

*  此阶段`vm.el`完成挂载，`vm.$el`生成的`DOM`替换了`el`选项所对应的`DOM`

**mounted**

*  `vm.el`已完成`DOM`的挂载与渲染，此刻打印`vm.$el`，发现之前的挂载点及内容已被替换成新的DOM

**beforeUpdate**

*  更新的数据必须是被渲染在模板上的（`el`、`template`、`rende`r之一）
 *  此时`view`层还未更新
 *  若在`beforeUpdate`中再次修改数据，不会再次触发更新方法

**updated**

*  完成`view`层的更新
 *  若在`updated`中再次修改数据，会再次触发更新方法（`beforeUpdate`、`updated`）

**beforeDestroy**

*  实例被销毁前调用，此时实例属性与方法仍可访问

**destroyed**

*  完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器
 *  并不能清除DOM，仅仅销毁实例

**使用场景分析**

<table> 
 <thead> 
  <tr> 
   <th>生命周期</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeCreate</td> 
   <td>执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务</td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>组件初始化完毕，各种数据可以使用，常用于异步数据获取</td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td>未执行渲染、更新，dom未创建</td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td>初始化结束，dom已创建，可用于获取访问数据和dom元素</td> 
  </tr> 
  <tr> 
   <td>beforeUpdate</td> 
   <td>更新前，可用于获取更新前各种状态</td> 
  </tr> 
  <tr> 
   <td>updated</td> 
   <td>更新后，所有状态已是最新</td> 
  </tr> 
  <tr> 
   <td>beforeDestroy</td> 
   <td>销毁前，可用于一些定时器或订阅的取消</td> 
  </tr> 
  <tr> 
   <td>destroyed</td> 
   <td>组件已销毁，作用同上</td> 
  </tr> 
 </tbody> 
</table>

## 四、题外话：数据请求在created和mouted的区别 ##

`created`是在组件实例一旦创建完成的时候立刻调用，这时候页面`dom`节点并未生成

`mounted`是在页面`dom`节点渲染完毕之后就立刻执行的

触发时机上`created`是比`mounted`要更早的

两者相同点：都能拿到实例对象的属性和方法

讨论这个问题本质就是触发的时机，放在`mounted`请求有可能导致页面闪动（页面`dom`结构已经生成），但如果在页面加载前完成则不会出现此情况

建议：放在`create`生命周期当中

## 参考文献 ##

*  https://juejin.cn/post/6844903811094413320
 *  https://baike.baidu.com/
 *  http://cn.vuejs.org/

面试官VUE系列总进度：4／33

[面试官：说说你对vue的理解?][vue]

[面试官：说说你对SPA（单页应用）的理解?][SPA]

[面试官：说说你对双向绑定的理解?][Link 1]

![format_png 2][]

[format_png]: /images/20221120/7045de719b3b44998734cb780157e1c6.png
[format_png 1]: /images/20221120/21a00d13c2284dbfa10d740debcf54ca.png
[vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c093cb674985ef3bd2966f66fc28c5eb70b0037e4be1af4bf54fb6fa9571985abd31d52f&idx=1&mid=2247484101&scene=21&sn=83b0983f0fca7d7c556e4cb0bff8c9b8#wechat_redirect
[SPA]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c081cb6749976814aaeda6a6433db418223cec57edda7e15b9e5a0ca69ad549655639c61&idx=1&mid=2247484119&scene=21&sn=d171b28a00d42549d279498944a98519#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c151cb6748476008dab2f4e6c6264f5d19678305955c85cec1b619e56e8f7457b7357fb9&idx=1&mid=2247484167&scene=21&sn=7b00b4333ab2722f25f12586b70667ca#wechat_redirect
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlJBRWlibkFlaWJFQXJKNG1Hd3ZrUnZZQ1BXWW16WEU2eVVMbTJYSFhYZGxSWmNreEV0a003S0FGZm1MNW1hQVVMdXNGR1BpYmVncjdRY2cvNjQw?x-oss-process=image/format,png