前言

学习 Vue 不得不提的就是 Vue 的生命周期。Vue 的生命周期，简单来说就是 Vue 实例从初始化创建到销毁的一系列过程。
怎样理解这个过程呢？先别急，让我们来康康人的一生是怎样的。

• 一岁哭着出场（创建）
• 十岁功课繁忙
• 二十春心荡漾
• 三十基本定向
• 四十事业栋梁
• 五十老当益壮
• 六十荣归家乡
• 七十打打麻将
• 八十晒晒太阳
• 九十躺在床上
• 百岁挂在墙上（销毁） 本篇文章主要讲解 Vue 生命周期知识点，让大家理解 Vue 实例从初始化创建到销毁的一系列过程。 一睹为快，本文的主要内容如下：

生命周期图示

Vue 实例的生命周期如下： 注：图片是来源于网络，具体是哪篇文章我不记得了，没有标明出处，还请见谅。

初始化阶段

beforeCreate

• 实例完全被创建出来之前会执行它，在 beforeCreate() 执行的时候，data 和 methods 中的数据都还没有初始化

created

• 在 created 中，data 和 methods 都已经初始化好了
• 如果要调用 methods 中的方法或者要操作 data 中的数据，最早只能在 created 中操作
• 在此阶段 DOM 还未生成，$el 属性还不存在，不能操作 DOM

beforeMount

• 模板编译/挂载之前。
• 模板已在内存中编辑完成，尚未渲染至页面
• 页面中的元素还没有被真正的替换过来，仍为上一个模板的数据

mounted

• 模板编译/挂载之后。
• 内存中的模板已真正的挂载到了页面中，用户已看到渲染好的页面
• mounted 是实例创建期间的最后一个生命周期函数
• 当执行完mounted 就表示实例已经被完全创建好了，此时可以操作 DOM

数据更新阶段

beforeUpdate

• 组件更新之前，页面中显示的数据还是旧的，此时 data 数据是最新的，页面尚未和最新的数据保持同步

updated

• 组件更新之后，页面和 data 中的数据已经保持同步，都是新的

销毁阶段

beforeDestory

• 组件销毁前调用，当执行 beforeDestory 钩子函数的时候,vue实例已经从运行阶段进入到了销毁阶段
• 实例上所有的 data 和 methods，以及过滤器指令，都处于可用状态，此时还没有真正执行销毁过程

destoryed

• 组件销毁后调用，组件已完全销毁

写在最后

学到这里，相信你对 Vue 的生命周期已经有了更清晰的认识。　　　　

你要相信，你是最棒的。