Vue 生命周期流程一览

Vue 生命周期

此帖子应该对照着官方提供的 Vue生命周期图 来看

本文参考了B站的这个视频 和 思否的这篇文章

注：思否的文章貌似存在争议，但本人水平有限，无法从文章中看到错误，如果想要参考那篇文章，请一定要看看文章评论区。

一、Vue 生命周期是什么

按照我自己的理解，不同的生命周期就是不同的钩子函数，各个钩子函数会负责它所处理的阶段。在这个阶段中，函数被调用，完成默认的功能，当然我们也可以在这些函数中写入代码，添加一些我们需要的功能。

Vue 生命周期其实指的是每个组件的一些默认功能。

再通俗来说，就是组件对应的页面，从被点击(create)到跳出该页面(destroy)的过程。

在这个过程中，创建页面、数据加载、事件绑定等都一一完成，又都最终被销毁处理。当页面被重新点击的时候，生命周期又会迎来一个新的循环。（扩展：如果我没记错的话，<keep-alive></keep-alive> 可以保留页面的生命周期，被 keep-alive 包裹的组件，不会被销毁。)

二、Vue 生命周期列举

Vue 的生命周期大致可以分成 3 类：

1. 创建期间的生命周期

• beforeCreate

• created

• beforeMount

• mounted

2. 运行期间的生命周期

• beforeUpdate

• updated

3. 销毁期间的生命周期

• beforeDestroy

• destroyed

三、各生命周期会发生的事情

接下来的内容需要对照下图来看。

step1.

new Vue()

var vm = new Vue({})，表示开始创建一个 Vue 的实例对象。

step2.

init Events & lifecycle

表示刚初始化了一个空的 Vue 实例对象，这个时候，这个对象身上只有默认的一些生命周期函数和默认的事件，其它的东西都未创建。

step3.

beforeCreate()

我们遇到的第一个生命周期函数，表示实例在完全被创建出来之前，会执行这个函数。注意：在 beforeCreate 生命周期执行的时候，data 和 methods 中的数据都还没有被初始化。此时无论访问 data 中的什么数据都会得到 undefined，调用 methods 方法也会报错。

step4.

init injections & reactivity

这句话不太好理解，但是我们可以把它换成：init data & methods。见名知义，在这一阶段，data 和 methods 被初始化。

step5.

created()

这是我们遇到的第二个生命周期函数。如果要调用 methods 中的方法，或者操作 data 中的数据，最早最早也只能在 created 中操作。

step6.

第一步——判断：Has “el” option（vue 实例有 el 选项吗）？ 如果没有 el 选项，则进入第二步，否则进入第三步

第二步——停止：如果没有 el 选项，则停止编译，也就意味着停止了生命周期，直到在该 vue 实例上调用 vm.$mount(el)，只有当调用 vm.$mount(el) 之后，生命周期才会继续

第三步——判断：Has “template” option（vue 实例有 template 选项吗）？如果没有 template 选项，则将 el 内部的 HTML 代码作为 template 编译；否则，编译 vue 实例中的 template 选项中的 HTML 代码

• 如果没有 “template” ↓

• 如果有 “template” ↓

注：整个 step6 阶段表示 Vue 开始编辑模板，执行 Vue 代码中的那些指令，最终在内存中生成一个编译好的模板字符串，然后把这个模板字符串渲染为内存中的 DOM。此时只是在内存中渲染好了模板，并没有真正地把模板挂载到页面中去。

step7.

beforeMount()

这是遇到的第三个生命周期函数，表示模板已经在内存中编译完成，但是尚未把模板渲染到页面中。页面中的元素没有被替换，模板字符串也只是模板字符串

请放大查看下图，并注意其中的红框标注，虽然页面显示的是 “okk”，但 beforeMount 阶段，message 还没有被编译（页面上之所以显示 “okk”，是因为 beforeMount 后面的方法的影响）。

step8.

Create vm.$el and replace “el” with it

这一步将内存中编译好的模板真实地替换到浏览器的页面中去。

step9.

mounted()

这是我们遇到的第四个生命周期函数，表示内存中的模板已经真实地挂载到了页面中，用户已经可以看到渲染好的页面了。如果要通过某些插件操作页面中的 DOM 节点，最早最早也要在 mounted 中进行。

注意：mounted 是实例创建期间的最后一个生命周期函数，只要执行完 mounted，就表示整个 Vue 实例已经被初始化完毕，如果没有其它操作的话，这个实例就静静地躺在浏览器的内存中一动不动_(:з」∠)_。此时组件已经脱离了创建阶段，并进入运行阶段。

请放大查看下图，并注意其中的红框标注。

step10.

(when data changes(当数据发生改变时) —触发—> )beforeUpdate()

当执行 beforeUpdate 的时候，页面中显示的数据还是旧的，此时的 data 数据是最新的，页面尚未和最新的数据保持同步。

请放大查看下图，并注意其中的红框标注。虽然页面中显示的是 “no”，但在 beforeUpdate 阶段，页面中的内容还没被修改（页面中的内容之所以被修改，是因为后面的 Updated 函数）。

step11.

Virtual DOM re-render and patch

这一步执行的是：先根据 data 中最新的数据，在内存中重新渲染出一份最新的 DOM 树，当最新的 DOM 树被渲染完成后，再将该 DOM 树重新渲染到真实的页面中去。这时候就完成了数据从 data(Model层) 到 view(视图层) 的更新。

step12.

updated()

updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的。

请放大查看下图，并注意其中的红框标注。

step13.

beforeDestroy()

当执行 beforeDestroy 钩子函数的时候，Vue 实例就已经从运行阶段进入到销毁阶段。此函数被执行时，实例上的所有 data 和所有 methods，以及过滤器，指令等都仍处于可用状态，还没有真正执行销毁的过程。

step14.

destroyed()

当执行到 destroyed 函数的时候，实例已经被完全销毁了。此时，组件中所有的数据、方法、指令、过滤器等都已不可用了。

以上两个方法比较特殊，这里不便演示。

---

tips:

1. 在整个生命周期中，比较重要的方法就是 created 和 mounted。

2. 需要掌握各个钩子函数触发的时机。