基于vue2.5.9版本
created()->beforeCompile()->compiled()->ready()->attached()->detached()->beforeDestroy()->destroyed()
new Vue({
el:'#app01',
data:{
msg:'hello vuejs'
},
init:function(){ //组件初始化
console.log('1.0 init',this.msg);
},
created:function(){ // 组件创建
console.log('2.0 created',this.msg);
},
beforeCompile:function(){ //组件编译之前
console.log('3.0 beforeCompile',this.msg);
},
compiled:function(){ //组件编译之后
console.log('4.0 compiled',this.msg);
},
activate:function(){ //在ready钩子之前,异步操作是非常有用的，比如从API中获取数据。
console.log('9.0 activate',this.msg);
},
ready:function(){ //组件准备
console.log('6.0 ready',this.msg);
},
attached:function(){ //vm.$el通过指令或VM实例方法（如，）连接到DOM 时调用$appendTo()。直接操作vm.$el将 不会 触发这个钩子
console.log('5.0 attached',this.msg);
},
detached:function () { vm.$el通过指令或VM实例方法（如，）移除DOM 时调用$appendTo()。直接移除操作vm.$el将 不会 触发这个钩子
console.log('7.0 detached',this.msg);
},
beforeDestroy:function () { //组件销毁前
console.log('8.0 beforeDestroy',this.msg);
},
destroyed:function () { //组件销毁完成
console.log('8.0 destroyed',this.msg);
},
});
new Vue({
el:'#app02',
data:{
msg:'hello vuejs'
},
beforeCreate:function(){
console.log('1.0 beforeCreate',this.msg);
},
created:function(){
console.log('2.0 created',this.msg);
},
beforeMount:function(){
console.log('3.0 beforeMount',this.msg);
},
mounted:function(){
console.log('4.0 mounted',this.msg);
},
updated: function () {
console.log('5.0 updated',this.msg);
},
activated: function () { //keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
console.log('6.0 activated',this.msg);
},
deactivated: function () { //keep-alive 组件停用时调用。。该钩子在服务器端渲染期间不被调用。
console.log('7.0 deactivated',this.msg);
},
beforeDestroy: function () { //实例销毁之前调用。在这一步，实例仍然完全可用。
console.log('8.0 beforeDestroy',this.msg);
},
destroyed: function () { //Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。。
console.log('9.0 destroyed',this.msg);
},
errorCaptured: function () { //当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
console.log('10.0 errorCaptured',this.msg);
},
});