生命周期
在vue生命周期中会进行以下四个阶段：实例化、创建dom、更新dom、销毁dom，具体流程如下图 
钩子函数
当明白这个流程后可以在每个阶段添加上对应的钩子函数 
如上图其实整个vue生命周期包含的构造函数如下：
sql
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元素。所以整个页面创建流程执行结果应该如下：
js
组件 钩子函数
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元素。所以整个页面更新流程执行结果应该如下：
js
组件 钩子函数
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组件也需要销毁，所以整个流程会调用的钩子函数如下图：
整个页面更新流程执行结果应该如下：
js
组件 钩子函数
A beforeupdate
B beforedestroy
C beforedestroy
C destroyed
B destroyed
A updated如果再次点击将temp的1改成0 页面更新流程执行结果应该如下：
js
组件 钩子函数
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发生变化，如果页面没（组件）没有变化，不会执行对应钩子函数。