uniapp的生命周期顺序

Page页面生命周期函数执行顺序

beforeCreate => onLoad => onShow => created => beforeMount => onReady => mounted

刷新数据后

beforeUpdate => updated

我的例子

代码

// 
beforeCreate() {
     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)
 },
 
 onLoad() {
     console.group('onLoad 状态===============》');
     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)
 },
 
 onShow() {
     console.group('onShow 状态===============》');
     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)
 },
 
 onReady() {
     console.group('onReady 状态===============》');
     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)
 },
 
 onUnload() {
     console.group('onUnload 状态===============》');
     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() {
     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() {
     console.group('beforeMount 组件挂载之前状态===============》');
     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);
 },
 
 mounted() {
     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() {
     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() {
     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() {
     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() {
     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)
 }

执行结果如下