vue生命周期钩子函数

生命周期

在vue生命周期中会进行以下四个阶段：实例化、创建dom、更新dom、销毁dom，具体流程如下图

钩子函数

当明白这个流程后可以在每个阶段添加上对应的钩子函数

如上图其实整个vue生命周期包含的构造函数如下：

before create
created
before mount
mounted
before update
updated
before destroy
destroyed

组件创建

整个生命周期的运行流程又是如何运行的呢？接下来将举例说明，如下图一个页面有三个组件，组件A为根组件其中引用组件B，组件B作为组件A的子组件，也引用一个组件C。

当创建这个界面生命周期将会先执行组件A的的钩子函数beforecreate、created、beforemount, 在创建render之后运行beforemount 生成虚拟dom，发现组件B等待，先去创建组件B 执行组件B的钩子函数beforecreate、created、beforemount， 同理在创建render之后运行beforemount 生成虚拟dom暂停，发现组件C， 执行组件B的钩子函数beforecreate、created、beforemount，这是由于C没有子组件所以执行mounted创建真实dom,C组件创建完成，对应B组件也执行mounted创建真实dom,B组件完成，对应A组件也执行mounted创建真实dom。

从上图，可以看出整个页面渲染会根据组件进行重复递归循环的创建dom元素。所以整个页面创建流程执行结果应该如下：

组件   钩子函数
A    beforecreate   //这个阶段，没有实例化完成，无法做事
A    created        //这个阶段，可以获取data数据
A    beforemount    //页面还在创建，无法拿去页面元素
·································································
B    beforecreate   //有子组件递归循环
B    created
B    beforemount
·································································
C    beforecreate   
C    created
C    beforemount     //没有子组件，完成C组件渲染
C    mounted         //返回C组件渲染结果
·································································
B    mounted
·································································
A    mounted

组件更新

假设点击A组件按钮，更新子组件C的数据0变成1，如下图： 执行更新流程，先执行A组件函数beforeupdate，然后发现B组件也需要更新，A组件更新暂停，先执行B组件的beforeupdate,发现C组件也需要更新，B组件更新暂停，执行C组件的beforeupdate、updated,C组件更新完成后，完成B组件、A组件的updated。

从上图，可以看出整个页面渲染会根据组件进行重复递归循环的更新dom元素。所以整个页面更新流程执行结果应该如下：

组件   钩子函数
A    beforeupdate
B    beforeupdate
C    beforeupdate
C    updated
B    updated
A    updated

组件销毁/更新

假设现在A页面存在一个temp变量，点击"按钮1" temp变量变成1，对应的B组件'v-if'将会执行，如下图： 首先要明确A组件是更新，B、C是销毁，对应的生命周期执行，点击a组件的"按钮"，首先会触发A组件的beforeupdate更新函数，执行B函数，因为v-if为false则销毁B组件，由于B组件引用C组件，所以对应的C组件也需要销毁，所以整个流程会调用的钩子函数如下图：

整个页面更新流程执行结果应该如下：

组件   钩子函数
A    beforeupdate
B    beforedestroy
C    beforedestroy
C    destroyed
B    destroyed
A    updated

如果再次点击将temp的1改成0 页面更新流程执行结果应该如下：

组件   钩子函数
A    beforeupdate
B    beforecreate
B    created
B    beforemount
C    beforecreate
C    created
C    beforemount
C    mounted
B    mounted
A    updated

组件更新的原理，其实是通过对应虚拟dom树，虚拟dom树是json字符串，当用户改变后，则通过对比新旧虚拟dom是否发生变化，如果变化，则指向新的虚拟dom，触发对应的组件的钩子函数，同时页面真实dom发生变化，如果页面没（组件）没有变化，不会执行对应钩子函数。