👏uniapp页面与组件生命周期

引言

最近开发uniapp比较多，在uniapp里虽然是使用vue的语法，但它仍然有一些自己的概念，其中有一点就是页面也有自己的生命周期，同时开发的组件使用的是vue的生命周期，所以我就比较好奇，这些生命周期之间的触发顺序到底是怎样的？

过程

先建立一个测试demo项目

demo01组件

<template>
    <view>
        component1
        <component2></component2>
    </view>
</template>
<script>
export default {
    name: 'component1',
    data() {
        return {}
    },

    beforeCreate() {
        console.log('demo01 11111')
    },

    create() {
        console.log('demo01 22222')
    },

    beforeMount() {
        console.log('demo01 33333')
    },

    mounted() {
        console.log('demo01 44444')
    },

    beforeDestroy() {
        console.log('demo01 55555')
    },

    destroyed() {
        console.log('demo01 66666')
    }
}
</script>

demo02组件

<template>
    <view>
        component2
    </view>
</template>
<script>
export default {
    name: 'component2',
    data() {
        return {}
    },

    beforeCreate() {
        console.log('demo02 11111')
    },

    create() {
        console.log('demo02 22222')
    },

    beforeMount() {
        console.log('demo02 33333')
    },

    mounted() {
        console.log('demo02 44444')
    },

    beforeDestroy() {
        console.log('demo02 55555')
    },

    destroyed() {
        console.log('demo02 66666')
    }
}
</script>

index页面

<template>
    <view>
        index
        <component1></component1>
        <button>点击</button>
    </view>
</template>
<script>
export default {
    data() {
        return {}
    },

    onLoad() {
        console.log('index 11111')
    },

    onShow() {
        console.log('index 22222')
    },

    onReady() {
        console.log('index 33333')
    },

    onHide() {
        console.log('index 44444')
    },

    onUnload() {
        console.log('index 55555')
    }
}
</script>

运行结果

渲染过程：

卸载过程：

结论

1. 渲染完成之前

即mounted之前组件（父子组件都是）生命周期优先于页面生命周期；

父组件，子组件直接的顺序是父组件优先子组件。

执行过程：

父beforeCreate => 父created => 父beforeMount=>子beforeCreate=> 子created=>

子beforeMount => 页面onLoad => 页面onShow；

2. 渲染完成时，

即beforeDestroy之前组件（父子组件都是）生命周期优先于页面生命周期；

父组件，子组件直接的顺序是组件优先于父组件。

子mounted => 父mounted=> 页面 onReady；

3. 销毁过程：

页面生命周期优先于组件生命周期（父子组件都是）;

父组件，子组件直接的顺序是子组件优先于父组件

页面 onUnload => 子beforeDestroy => 子destroyed => 父beforeDestroy => 父destroyed