<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'vue的生命周期'
},
beforeCreate:function(){
console.group('-----beforeCreate创建前状态-----');
console.log('%c%s','color:red','el:' + this.$el);
console.log("%c%s", "color:red","data: " + this.$data);
console.log('%c%s','color:red','message:' + this.message);
},
created:function(){
console.group('------created创建完毕状态-----');
console.log('%c%s','color:red','el:' + this.$el);
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)
}
});
</script>
</html>callhook：callhook函数的功能就是调用某个生命周期钩子注册的所有回调函数。
beforeCreate&created
beforeCreate&created都是在实例化Vue的阶段。
beforeCreate和created的钩子调用发生在initState的前后，initState的作用是初始化props、data、methods、watch、computed等属性。所以beforeCreate的钩子函数中就不能获取到props、data中定义的值，也不能定义methods中定义的函数。
beforeCreate：进行初始化事件，进行数据的观测。
created：数据已经和data属性进行绑定。
created和beforeMount间的生命周期
首先会判断对象是否有el，如果有的话就继续向下编译，如果没有el，则停止编译，直到在vue实例上调用vm.$mount(el)。
然后，看template选项对生命周期的影响。
（1）.如果vue实例对象中有template参数选项，则将其作为模板编译成render函数。
（2）.如果没有template选项，则将外部HTML作为模板编译。
（3）.可以看到template中的模板优先级要高于outer HTML的优先级。
beforeMount&mounted
在执行vm._render()函数渲染vnode之前，执行了beforeMount钩子函数，在执行完vm._update()之后把vnode patch到真实的dom后，执行了mouted钩子。
beforeUpdate&updated
beforeUpdate和updated的钩子函数执行时机都是在数据更新的时候。当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。
beforeUpdate的执行是在渲染Watcher的before函数中。
注意这里有个判断，也就是组件已经mounted之后，才会调用这个钩子函数。
updated的执行时机是在flushSchedulerQueue函数调用的时候，
beforeDestroy&destroyed
beforeDestroy 和 destroyed 钩子函数的执行时机在组件销毁的阶段。
beforeDestroy钩子的执行时机是在$destroy函数执行最开始的地方，接着执行一系列的销毁动作，包括从parent的$children中删除自身，删除watcher，当前渲染的vnode执行销毁钩子函数等，执行完毕后在调用destroy钩子函数。
activated&deactivated
activated 和 deactivated 钩子函数是专门为 keep-alive 组件定制的钩子。
