vue2.0生命周期详解

首先上图展

 

<template>
    <div id="home">
        <p>{{ message }}</p>
    </div>
</template>
<script>
export default{
    data(){
        return{
            message:"vuex is very hard"
        }
    },
    beforeCreate(){
        console.log('beforeCreate创建前状态');
        console.log("el:"+this.$el);//undefined
        console.log("data:"+this.$data);//undefined
        console.log("message:"+this.message)//undefined
    },
    created(){
        console.log('created创建完毕状态');
        console.log("el:"+this.$el);//undefined
        console.log("data:"+this.$data);//[object Object]
        console.log("message:"+this.message)//vuex is very hard
    },
    beforeMount(){
        console.log('beforeMount挂载前状态');
        console.log("el:"+this.$el);//undefined
        console.log("data:"+this.$data);//[object Object]
        console.log("message:"+this.message)//vuex is very hard
    },
    mounted(){
        console.log('mounted挂载结束状态');
        console.log("el:"+this.$el);//[object HTMLDivElement]
        console.log("data:"+this.$data);//[object Object]
        console.log("message:"+this.message)//vuex is very hard
    },
    beforeUpdate(){
        console.log('beforeUpdate更新前状态');
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("message:"+this.message)
    },
    updated(){
        console.log('updated更新完成状态');
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("message:"+this.message)
    },
    beforeDestroy(){
        console.log('beforeDestroy摧毁前状态');
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("message:"+this.message)
    },
    destroyed(){
        console.log('destroyed');
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("message:"+this.message)
    },
}
</script>

主要：

beforecreated：el 和 data 并未初始化 
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 data 数据的初始化，el没有
mounted ：完成挂载，完成了 el 和 data 初始化

beforecreate : 可以在这加个loading事件 
created ：在这结束loading，还做一些初始化，实现函数自执行 
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

 

 

 

 

 

 

 

 

 

参考：https://segmentfault.com/a/1190000008010666