深入理解Vue生命周期函数

对Vue生命周期函数的个人理解

对于Vue已经学习了有一段时间了，但是有些东西还是似懂非懂，尤其是对于Vue生命周期函数，仅仅是有一些印象，但是在实际的运用过程中还是不会，有些东西实在是理解不了，所以今天就找了些资料，顺便自己也总结了一下。

Vue生命周期函数图解

将Vue生命周期函数抽成了下面几个周期

9.1 组件创建期间

9.1.1 beforeCreate

beforeCreate这个函数会在组件实例刚被创建，组件属性计算之前（如data属性），进行调用; el和data并未初始化

9.1.2 created

created这个函数会在组件实例创建完成，属性已经绑定，但DOM还未生成，完成了data数据的初始化，$el属性还不存在

9.1.3 beforeMount

beforeMount这个函数会在模板挂载之前，进行调用

9.1.4 mounted

mounted这个函数会在模板挂载之后，进行调用，但是不保证组件已在document中

9.2 组件运行期间

9.2.1 beforeupdate

beforeupdate该函数会在组件更新之前进行调用

9.2.2 updated

updated该函数会在组件更新之后进行调用

9.3 组件被 keep-alive 缓存的组件激活与销毁期间

9.3.1 activated

activated这个函数对于keep-alive，组件被激活时调用

9.3.2 deactivated

deactivated 这个函数对于keep-alive，组件被移除时进行调用

9.4 组件销毁期间

9.4.1 beforeDestory

beforeDestory这个函数是在组件被销毁之前进行调用

9.4.2 destoryed

destoryed该函数是在组件销毁之后进行调用