Vue的生命周期

最近因为碰到取值问题打算好好看下Vue的生命周期，之前只是简单的了解了下Vue的生命周期。浅略的知道分为beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed，但是对于在这之间Vue的不同阶段到底做了什么不甚了解。

vue的源码

分析生命周期，我们首先得从创建vue实例开始。
在new Vue()的时候，vue/src/core/instance/index.js中的_init()负责初始化各个功能。

function Vue(options){
    if(process.env.NODE_ENV !== 'production' && !(this instance Vue)){
        warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
}

_init中的执行顺序为下

initLifeClircle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm)  //resolve injections before data/props
initState(vm)
initProvide(vm)  //resolve provide after data/props
callHook(vm, 'created')

而在initState()中执行顺序如下：

if(opts.props) initProps(vm, opts.props)  //初始化props
if(opts.methods) initMethods(vm, opts.methods)  //初始化methods
if(opts.data) {
    initData(vm, opts.data);
}else{
    observe(vm._data = {}, true /* as root data*/);  //初始化data
}
if(opts.computed) initComputed(vm, opts.computed);  //初始化computed

可以看出先执行props，然后是methods，紧接着是data最后是computed。并且这个阶段是在beforeCreated和created之间，
所以使用computed中的数据时需要慎重。