vue实例生命周期

生命周期图示

一下测试el，data，methods，computed在什么生命周期初始化
代码以下（App.vue）vue

<template name="ap2">
    <div id="life">
        生命周期函数的演示 ---{{msg}}
        <button @click="setdMsg()">改变msg</button>
    </div>
</template>
<script>
export default{
    data(){
        return {
            msg:'dd',
            flag:true,
        }
    },
    methods:{
        setdMsg(){
            this.msg = '我是改变后的'
        }
    },
    computed:{
        title(){
            return 'this is title';
        }
    },
    beforeCreate(){
        console.log('实例刚刚被建立1,beforeCreate');
        console.log("%c%s", "color:red",'el',this.$el);
        console.log("%c%s", "color:red",'msg',this.msg);
        console.log("%c%s", "color:red",'fun',this.setdMsg);
        console.log("%c%s", "color:red",'computed',this.title);
    },
    created(){
        console.log('实例已经被建立完成2,created');
        console.log("%c%s", "color:red",'el',this.$el);
        console.log("%c%s", "color:red",'msg',this.msg);
        console.log("%c%s", "color:red",'fun',this.setdMsg);
        console.log("%c%s", "color:red",'computed',this.title);
    },
    beforeMount(){
        console.log('模板编译以前3,beforeMount');
        console.log("%c%s", "color:red",'el',this.$el);
        console.log("%c%s", "color:red",'msg',this.msg);
        console.log("%c%s", "color:red",'fun',this.setdMsg);
        console.log("%c%s", "color:red",'computed',this.title);
    },
    mounted(){//请求数据，操做dom，放在这个里面
        console.log('模板编译完成4,mounted');
        console.log("%c%s", "color:red",'el',this.$el);
        console.log("%c%s", "color:red",'msg',this.msg);
        console.log("%c%s", "color:red",'fun',this.setdMsg);
        console.log("%c%s", "color:red",'computed',this.title);
    },
    beforeUpdate(){
        console.log('数据更新以前5,beforeUpdate');
        console.log("%c%s", "color:red",'el',this.$el);
        console.log("%c%s", "color:red",'msg',this.msg);
        console.log("%c%s", "color:red",'fun',this.setdMsg);
        console.log("%c%s", "color:red",'computed',this.title);
    },
    updated(){
        console.log('数据更新完毕6,updated');
        console.log("%c%s", "color:red",'el',this.$el);
        console.log("%c%s", "color:red",'msg',this.msg);
        console.log("%c%s", "color:red",'fun',this.setdMsg);
        console.log("%c%s", "color:red",'computed',this.title);
    },
    beforeDestroy(){
        console.log('实例销毁以前7,beforeCreate');
        console.log("%c%s", "color:red",'el',this.$el);
        console.log("%c%s", "color:red",'msg',this.msg);
        console.log("%c%s", "color:red",'fun',this.setdMsg);
        console.log("%c%s", "color:red",'computed',this.title);
    },
    destroyed: function () {
        console.group('destroyed8 销毁完成状态》');
        console.log("%c%s", "color:red",'el',this.$el);
        console.log("%c%s", "color:red",'msg',this.msg);
        console.log("%c%s", "color:red",'fun',this.setdMsg);
        console.log("%c%s", "color:red",'computed',this.title);
    }
}
</script>

效果以下：
web

能够看出
beforeCreate阶段，el，msg，methods，computed都没有被初始化。ajax

created阶段，除了el其余都被初始化了，这是一个Vue实例基本建立完毕。dom

beforeMount阶段以前，因为这里没有el option（），先到达了beforeMount，而后要等到执行vm.$mount(el)，即当组件须要被挂载时才会编译template或outerHTML，因此这里beforeMount阶段el仍是undefined，这里修改一下官方的图更便于理解，当判断 has el option 时，若是no会应直接跳到beforeMount，而后到mount阶段，会判断has template option，而后再到mounted。
修改图以下
svg

接下来是mount阶段（这个不是周期函数）挂载
mounted阶段完成挂载后执行。
接下来等update或destory函数

当data改变会触发update的操做
点击按钮
测试

destory操做，当组件被销毁时触发（例如使用v-if=“true or false"操做组件是否被挂载时触发）this

另外当使用<keep-alive></keep-alive>包裹组件时，会有activated（组件被激活时调用，例如从新发送ajax），deactivated（组件被移除时调用）code

总结
怎么用这些钩子函数
beforecreate：初始化以前能够加一个loading
created：结束loading
mounted：发送ajax
beforeDestory：存储一些数据xml