vue生命周期总结

1、2.0和3.0对比 

1.1代码示例

beforeCreate: function () {
  console.group('beforeCreate');
  console.log("el     : " + this.$el); 
  console.log("data   : " + this.$data); 
  console.log("message: " + this.message)  
},
created: function () {
  console.group('created');
  console.log("el     : " + this.$el); 
  console.log("data   : " + this.$data); 
  console.log("message: " + this.message)  
},
beforeMount: function () {
  console.group('beforeMount');
  console.log("el     : " + this.$el); 
  console.log(this.$el); 
  console.log("data   : " + this.$data); 
  console.log("message: " + this.message)  
},
mounted: function () {
  console.group('mounted');
  console.log("el     : " + this.$el); 
  console.log(this.$el);    
  console.log("data   : " + this.$data); 
  console.log("message: " + this.message)  
},
beforeUpdate: function () {
  console.group('beforeUpdate');
  console.log("el     : " + this.$el); 
  console.log(this.$el);    
  console.log("data   : " + this.$data); 
  console.log("message: " + this.message)  
  console.log("真实dom结构："+ document.getElementById('app').innerHTML);
},
updated: function () {
  console.group('updated');
  console.log("el     : " + this.$el); 
  console.log(this.$el);    
  console.log("data   : " + this.$data); 
  console.log("message: " + this.message)  
  console.log("真实dom结构："+ document.getElementById('app').innerHTML);
},
beforeDestroy: function () {
  console.group('beforeDestroy');
  console.log("el     : " + this.$el); 
  console.log(this.$el);    
  console.log("data   : " + this.$data);  
  console.log("message: " + this.message)  
},
destroyed: function () {
  console.group('destroyed');
  console.log("el     : " + this.$el); 
  console.log(this.$el);    
  console.log("data   : " + this.$data);    
  console.log("message: " + this.message)  
}

打印出来结果

2、如果使用keep-alive

会有一个activated（组件激活使用）和 deactivated(组件移除使用)

activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
deactivated:  页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

3、父子组件生命周期

3.1 加载渲染过程

同步引入时生命周期顺序为：
父组件的beforeCreate、created、beforeMount --> 所有子组件的beforeCreate、created、beforeMount --> 所有子组件的mounted --> 父组件的mounted
总结：父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载

异步引入时生命周期顺序为：
父组件的beforeCreate、created、beforeMount、mounted --> 子组件的beforeCreate、created、beforeMount、mounted

总结：父组件创建，父组件挂载；子组件创建，子组件挂载。

3.2 子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated

3.3 父组件更新过程
父beforeUpdate->父updated

3.4 销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed