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

布满荆棘的人生 2023-01-07 15:29 267阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  一、生命周期是什么
 *  二、生命周期有哪些
 *  三、生命周期整体流程
 *  四、题外话：数据请求在created和mouted的区别
 *  参考文献

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]

# 一、生命周期是什么 #

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

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

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

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

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

# 二、生命周期有哪些 #

Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]

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

Vue生命周期流程图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]  
具体分析  
**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、render之一）  
此时view层还未更新  
若在beforeUpdate中再次修改数据，不会再次触发更新方法

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

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

**destroyed**  
完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器  
并不能清除DOM，仅仅销毁实例  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 3]

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

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

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

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

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

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

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

# 参考文献 #

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221119/8fbe7729fabe4601b06d10c9ac5a67e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]: /images/20221119/937a4ea2574a422bb17c024df3e3ca5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]: /images/20221119/0b4fdd8b45444d189d5a144be4939f43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 3]: /images/20221119/ed7fb6542c494bb1bdba57b95d5c0e45.png