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

Vue.js和小程序生命周期

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

• 微信小程序：页面Page和组件Component生命周期执行的先后顺序

页面

  
    
  



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

组件

  

  



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

输出结果

page beforeCreate
page created
page beforeMount

component beforeCreate
component created
component beforeMount
component mounted

page mounted

总体逻辑：

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

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