Vue.js：页面Page和组件Component生命周期执行的先后顺序

<template>
  <div class="">
    <TestComponent></TestComponent>
  </div>
</template>
<script>
// created at 2022-03-02
import TestComponent from './test-component.vue';
export default {
  name: 'index',
  components: {
    TestComponent,
  },
  beforeCreate() {
    console.log('page beforeCreate');
  },
  created() {
    console.log('page created');
  },
  beforeMount() {
    console.log('page beforeMount');
  },
  mounted() {
    console.log('page mounted');
  },
  beforeUpdate() {
    console.log('page beforeUpdate');
  },
  updated() {
    console.log('page updated');
  },
  activated() {
    console.log('page activated');
  },
  deactivated() {
    console.log('page deactivated');
  },
  beforeDestroy() {
    console.log('page beforeDestroy');
  },
  destroyed() {
    console.log('page destroyed');
  },
  errorCaptured() {
    console.log('page errorCaptured');
  },
};
</script>
<style lang="less">
</style>
<style lang="less" scoped>
</style>

<template>
  <div class="">
  </div>
</template>
<script>
// created at 2022-03-02
export default {
  name: 'test-component',
  beforeCreate() {
    console.log('component beforeCreate');
  },
  created() {
    console.log('component created');
  },
  beforeMount() {
    console.log('component beforeMount');
  },
  mounted() {
    console.log('component mounted');
  },
  beforeUpdate() {
    console.log('component beforeUpdate');
  },
  updated() {
    console.log('component updated');
  },
  activated() {
    console.log('component activated');
  },
  deactivated() {
    console.log('component deactivated');
  },
  beforeDestroy() {
    console.log('component beforeDestroy');
  },
  destroyed() {
    console.log('component destroyed');
  },
  errorCaptured() {
    console.log('component errorCaptured');
  },
};
</script>
<style lang="less">
</style>
<style lang="less" scoped>
</style>

page beforeCreate
page created
page beforeMount
component beforeCreate
component created
component beforeMount
component mounted
page mounted