uni-app 生命周期函数执行顺序

<template>
    <view ref="ref" class="test-container">
        <text>{{message}}</text>
        <button @click="addMsg">点击</button>
    </view>
</template>

<script>
    
    import {
        mapState,
        mapMutations
    } from 'vuex';
    var key = 0;
    export default {

        data() {
            return {
                message: 1
            }
        },

        computed: {
            
        },

        methods: {

            addMsg() {
                this.message++
            }

        },
        
        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)
        }
        
    }
</script>

<style lang="scss">
    .test-container {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 0upx 40upx;
        button {
            margin-top: 100upx;
        }
    }
</style>

屏幕快照 2019-07-16 上午11.11.14.png

当点击按钮时

屏幕快照 2019-07-16 上午11.24.36副本.png

总结

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

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

刷新数据后

beforeUpdate => updated