vue基础（2）--lifecycle

import Vue from 'vue'
new Vue({
    el:"root",              //未指定挂载el的话，beforeMounted和mounted不会调用
    data:{
        text:0
    },
    template:'<div>{{text}}</div>',
    beforeCreate(){        //服务端渲染时候回调用        
        console.log(this.'beforeCreate')
    },
    created(){              //服务端渲染时候回调用
        console.log(this.'craetd')
    },
    beforeMounted(){       //跟DOM对象相关    
        console.log(this.'beforeMounted')
    },
    mounted(){             //跟DOM对象相关,有对象就执行挂载    
        console.log(this.'mounted')
    },
    beforeUpdate(){
        console.log(this.'beforeUpdate')
    },
    updated(){             //有数据更新调用
        console.log(this.'updated')
    },
    actived(){},
    deactived(){           //组件相关
    },
    beforeDestroy(){
    },
    destroy(){
    },
    render(h){
        throw new TypeError('render error')
        console.log('render function')       //在beforeMounted和mounted之间执行
        return h('div',{},this.text)
    },
    renderError(h,err){                      //本组件出现错误时调用，在render()里面报错时调用
        return h('div',{},err.stack)
    },
    errorCaptured(){                         //会让其子组件向上冒泡报错，且可用在正式环境
    }
})

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

创建=>挂载=>更新=>销毁

new Vue()对象的时候，首先默认是执行init()方法的。在init的过程当中首先调用了beforeCreate，在调用created(),created()方法会判断对象是否有el挂载对象，template模板，如果有，beforeMounted开始，会将template解析成一个render function。（即render方法在beforeMounted和mounted之间执行）。

template模板，在经过了vue-loader的处理之后，就变成了render function，最终放到了vue-loader解析过的文件里面。 （此过程很耗时）

beforeMount在有了render function的时候才会执行，当执行完render function之后，就会调用mounted这个钩子，在mounted挂载完毕之后，这个实例就算是走完流程了。

render 其中要传3个参数，第一个参数就是创建的div标签；第二个参数传了一个对象，对象里面可以是我们组件上面的props，或者是事件之类的东西；第三个参数就是div标签里面的内容，这里我们指向了data里面的text。

后续的钩子函数执行的过程都是需要外部的触发才会执行。比如说有数据的变化，会调用beforeUpdate，然后经过Virtual DOM，最后updated更新完毕。当组件被销毁的时候，它会调用beforeDestory，以及destoryed。