Vue中生命周期的理解

代码及结果截图

HTML

<div id="app">
    <p>{{ message }}</p>
    <h1>{{message + '这是在outer HTML中的'}}</h1>
</div>

js

 var app = new Vue({
    el: '#app',
    data: {
        message : "xuxiao is boy"
    },
    template:"<h1>{{message +'这是在template中的'}}</h1>",
    // render: function(createElement) {
    //     return createElement('h1', 'this is createElement')
    // },
    beforeCreate: function () {
        console.group('beforeCreate 创建前状态===============》');
        console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
        console.log("%c%s", "color:red","data   : " + this.$data); //undefined
        console.log("%c%s", "color:red","message: " + this.message)
    },
    created: function () {
        console.group('created 创建完毕状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el); //undefined
        console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    beforeMount: function () {
        console.group('beforeMount 挂载前状态===============》');
        console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    mounted: function () {
        console.group('mounted 挂载结束状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    beforeUpdate: function () {
        console.group('beforeUpdate 更新前状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data);
        console.log("%c%s", "color:red","message: " + this.message);
    },
    updated: function () {
        console.group('updated 更新完成状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data);
        console.log("%c%s", "color:red","message: " + this.message);
    },
    beforeDestroy: function () {
        console.group('beforeDestroy 销毁前状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data);
        console.log("%c%s", "color:red","message: " + this.message);
    },
    destroyed: function () {
        console.group('destroyed 销毁完成状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data);
        console.log("%c%s", "color:red","message: " + this.message)
    }
})

最终结果

初始化阶段

beforecreate

在这个阶段，完成实例初始化，

初始化非响应式变量 this指向创建的实例； 

可以在这加个loading事件；

data computed watch methods上的方法和数据均不能访问，这个时候的Vue实例还什么都没有，但是在这个阶段$route对象是存在的，可以根据路由信息进行重定向之类的操作；

这个阶段的data对象未完成初始化，el也没有完成初始化；

DOM还没有开始

created 【创建完成】

在模板渲染成HTML前调用，即通常初始化一些属性值，然后再渲染成视图， 未挂载DOM；created时还没完成挂载，无法通过id等获得DOM元素

实例创建完成 完成数据(data props computed)的初始化 导入依赖项。

可访问data computed watch methods上的方法和数据 ；


不能访问el【初始化还未完成】,ref为空数组 ；不能对元素进行操作；

可在这结束loading，

还做一些初始化，实现函数自执行,

可以对data数据进行操作，可进行一些请求，请求不易过多，避免白屏时间太长。
el还是undefined，

而数据已经与data中的属性进行绑定（放在data中属性当值发生改变的同时，视图也会发生变化），

在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，**一般可以在这里做初始数据的获取**

**若在此阶段进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中；因为created() 钩子函数执行的时候 DOM 其实并未进行任何渲染**

Vue.nextTick( [callback, context] )：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

模板编译阶段

beforemount & mount

在created后，beforemount前，会检查el选项，没有就会调用vm.$mount()，然后就会继续检查template，没有的话就绑定el选项的html，进入beforemount后，编译模板为虚拟的DOM，，开始render，将虚拟DOM渲染到页面上；

从created到beforeMount的过程中，

     var app = new Vue({
            el: '#app',
            data: {
                message : "xuxiao is boy"
            },
            template:"<h1>{{message +'这是在template中的'}}</h1>",
            // render: function(createElement) {
            //     return createElement('h1', 'this is createElement')
            // },

首先会判断vue实例中有没有el选项，如果有的话则进行下面的编译，但是如果没有el选项，则停止生命周期，直到vue实例上调用vm.$mount(el)。

如果有el，再判断是否有template参数，如果有，则把其当作模板编译成render函数，

如果没有，则把外部的html作为模板编译。template中的模板优先级高于outer HTML模板。

这是把outerHTML当作模板编译了

<div id=”app”>

<p>{{ message }}</p>
<h1>{{message + '这是在outer HTML中的'}}</h1>

</div>

如果把实例中render function选项的注释去掉，则直接用render function里的，得到网页如下

所以按优先级来说 render function>template>outerHTML
————————————————

在vue对象中还有一个render函数，它是以createElement作为参数，然后做渲染操作，而且我们可以直接嵌入JSX.
综合排名优先级：render函数选项 > template选项 > outer HTML.

挂载阶段

beforeMount【挂载之前】

载入前（完成了data和el数据初始化），

但是页面中的内容还是vue中的占位符，

$el属性已存在，是虚拟dom，只是数据未挂载到模板中。

data中的message信息没有被挂在到Bom节点中，

在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

mounted 【成功挂载】

完成创建vm,

完成el的双向绑定，完成挂载dom和渲染，可以在这个阶段对挂载的DOM进行操作；

ref 可在这发起后端请求，拿回数据，配合路由钩子做一些事情； 可对DOM 进行操作

载入后html已经渲染(ajax请求可以放在这个函数中)，把vue实例中的data里的message挂载到BOM节点中去