【Vue】还在为vue生命周期头疼？把这张图甩给他，面试官直呼内行！

一文了解vue生命周期

注：本文章是作者在网上阅读资料后的个人总结，必然有一定疏漏，希望大家可以在评论区指出错误

---

前言

在前端开发中，每个Vue实例在被创建的时候都需要经过一系列的初始化过程，这个过程中也会运行一些叫做生命周期钩子的函数(回调函数)，这给了用户在不同阶段添加自己代码的机会。

---

一、Vue的生命周期图

二、如何理解这张图？

面试官在问你什么时vue生命周期的时候，你肯定不能说：“喏，我这有张图片，自己去看吧！”

下面就是如何把这个图片拆分成一段一段的话：

1.创建vue实例：

首先我们创建了一个Vue实例vm，将其挂载到页面中id为“app”的元素上。

2.根组件的beforeCreate阶段：

在调用beforeCreate()函数时，只进行了一些必要的初始化操作（例如一些全局的配置和根实例的一些属性初始化），此时data属性为undefined，没有可供操作的数据。

3.根组件的Created阶段：

调用Created()函数，在这一步，实例已完成以下的配置：数据代理和动态数据绑定(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

4.根组件的beforeMount阶段：

在调用boforeMount()函数前首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)，此时只有虚拟的dom，还不能对dom元素进行操作

5.子组件的beforeCreate、Created、beforeMount、Mounted阶段：

在父组件执行beforeMount阶段后，进入子组件的beforeCreate、Created、beforeMount阶段，这些阶段和父组件类似，按下不表。beforeMount阶段后，执行的是Mounted阶段，该阶段时子组件已经挂载到父组件上，并且父组件随之挂载到页面中。

6.子组件的activated阶段：

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。

7.父组件的mounted阶段:

mounted执行时：此时el已经渲染完成并挂载到实例上。至此，从Vue实例的初始化到将新的模板挂载到页面上的阶段已经完成，此时可以对dom进行操作

8.beforeDestroy和destroyed钩子函数间的生命周期：

beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁（也就是说子组件也会触发相应的函数）。这里的销毁并不指代’抹去’，而是表示’解绑’。销毁时的传递顺序为：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed