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