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

Vue.js和小程序生命周期

页面

<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

总体逻辑：

先创建父组件，再创建子组件，挂载子组件到父组件上

参考
https://cn.vuejs.org/v2/guide/instance.html#生命周期图示