面试官：你对vue生命周期的理解？

我就是我 2022-12-27 08:34 227阅读 0赞

## 面试官：你对vue生命周期的理解？ ##

![image.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`生命周期解释图

![image.png][image.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_juejin.cn_post_6844903811094413320]
 *  [https://baike.baidu.com/][https_baike.baidu.com]
 *  [http://cn.vuejs.org/][http_cn.vuejs.org]
    
    > @JS语音社群

[image.png]: /images/20221120/f5fa84dede1548e393e0283cb3cfca79.png
[image.png 1]: /images/20221120/8983a8d145f8433ca58d76121d17dbe3.png
[https_juejin.cn_post_6844903811094413320]: https://juejin.cn/post/6844903811094413320
[https_baike.baidu.com]: https://baike.baidu.com/
[http_cn.vuejs.org]: http://cn.vuejs.org/