人有生老病死，月有阴晴圆缺，万物都有其生存规律。vue也有一套从创建到销毁的流程，每个阶段会触发一个钩子函数。普通的vue组件会经过：创建->挂载->更新->销毁的生命周期流程，通过vue源码分析每个阶段都做了哪些任务。

1，创建阶段

    创建阶段有beforCreate,created两个生命构子，我们从源码中分析创建阶段做了哪些工作。从core/instance/index.js文件中找到vue实例化的构造函数

     从这个文件可以看到在VUE构造函数中可以看到Vue必须使用new关键字实例化，然后调用_init方法。_init方法在initMixin方法定义，然后挂载到Vue构造函数原型上。Vue构造函数下面的5个**Mixin方法都是对Vue构造函数进行一系列初始化，通过方法名大概也能猜到他们的功能，这里关注initMixin方法，因为创建阶段的方法是这里执行的。

由于initMixin方法太长，我分段讲解。

_init_1

initMixin方法首先在Vue原型上挂载_init方法，this指向的是调用_init方法的实例，每个实例都有一个唯一标示_uid。

_init_2

这一步合并构造函数中传来的options对象

_init_3

这里是重点，可以直观的看到调用beforeCreate和created构子函数的时机。

beforeCreate前

initLifecycle：把当前实例放到父实例的$children里，设置父实例$parent，设置$root,初始化$children，$refs,_watcher,_inactive等。

initEvents：定义在events.js文件中，定义_events对象，_events表示的是父组件绑定在当前组件上的事件。

initRender：主要实现两部分功能1，将children VNode转换成slots对象  2，将$attrs和$listeners设置成可监听的

created前

initInjections：该方法在初始化data/props之前被调用，主要作用是初始化vue实例的inject。

initState：初始化props,methods,data,computed,watch。初始化computed时会对每个computed属性创建一个computedWatcher。

initProvide：初始化vm._provied对象，如是函数则改变provide方向的this指向,否则返回provide本身

然后执行created构子

_init_4

如果设置了el，执行挂载方法。

2、挂载阶段

vue初始化之后，可以挂载到DOM树中，如图_init_4所示是调用$mount方法完成的。

$mount

可以看到$mount挂载到Vue的prototype上面，返回mountComponent方法。mountComponent在lifecycle.js中定义，下面分析一下这个方法做的哪些工作。

beforeMount前

1，设置vm.$el=el

2，设置vm.$options.render

3，调用beforeMount

mounted前

1，创建vm实例的Render观察者，把updateComponent传入watcher作为getter，在watcher初始化过程中，会执行getter，也就是会执行updateComponent，

render-watcher

updateComponent

其中_update方法是定义在lifecycleMixin方法中，是个VUE原型方法。这里的功能就是把vm._render()得到的vnode patch到真实DOM树中。

lifecycleMixin

2,设置_isMounted=true

beforeUpdate

在上面的render-watcher代码可以看到挂载的时候，会new一个watcher,watcher执行更新前，执行更新构子,这个功能在scheduler.js的flushSchedulerQueue中调用。

flushSchedulerQueue

因为watcher更新时是在放在更新队列中异步更新的，异步更新时遍历列新队列触发beforUpdate函数。

updated

在当前组件Dom已完成更新，调用此构子函数。在scheduler.js中实现

callupdateHooks

每个watcher执行update更新时会把自身放到更新队列中。如同一个事件循环周期，触发多次更新，只会把watcher放入一次，也就是说同一个watcher所对应的属性同时多次赋值，DOM只更新一次且是异步更新。

watcher-update

queueWatcher

has[id]不为空的话，则不执行添加队列的操作。添加watcher到更新队列后，异步执行flushSchedulerQueue函数。

queueWatcher

与beforeUpdate构子函数同在flushSchedulerQueue函数中执行，这里才是真正执行更新DOM的地方。

flushSchedulerQueue

遍历执行watcher.run方法，更新DOM

flushSchedulerQueue

执行完所有的watcher.run，调用callUpdateHooks方法，执行每个vm的updated构子函数。

callUpdatedHooks

beforeDestroy

当调用vm.$destroy方法时，组件进入销毁阶段。

首先调用beforeDestroy构子函数，这个函数里还未真正执行销毁操作，可以读取VUE实例相关信息，但是修改数据不能更新DOM。原因也是很简单，因为更新DOM是异步的，接着destroy方法执行后面的销毁工作。

后面以以下步骤执行， 1，设置_isBeingDestroyed=true  2，从父结点把自已删除 3，删除render-watcher/清理dep依赖 4，清理vm下所有watcher及dep依赖，5，执行__patch__调用销毁钩子，销毁所有子组件

销毁钩子

destroyed

关闭所有实例监听，移除__vue__引用，释放vm.$vnode.parent

整个生命周期解读完毕，有不正确的地方欢迎指正。