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

// components/test-component/test-component.js
Component({
  /**
   * 组件生命周期函数-在组件实例刚刚被创建时执行
   */
  created() {
    // 注意此时不能调用 setData
    console.log('Component created');
  },
  /**
   * 组件生命周期函数-在组件实例进入页面节点树时执行
   */
  attached() {
    console.log('Component attached');
  },
  /**
   * 组件生命周期函数-在组件布局完成后执行
   */
  ready() {
    console.log('Component ready');
  },
  /**
   * 组件生命周期函数-在组件实例被移动到节点树另一个位置时执行
   */
  moved() {
    console.log('Component moved');
  },
  /**
   * 组件生命周期函数-在组件实例被从页面节点树移除时执行
   */
  detached() {
    console.log('Component detached');
  },
});

// pages/test-page/test-page.js
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log('Page onLoad');
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log('Page onReady');
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log('Page onShow');
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log('Page onHide');
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log('Page onUnload');
  },
});

{
  "usingComponents": {
    "test-component": "/components/test-component/test-component"
  }
}

<!--pages/test-page/test-page.wxml-->
<test-component></test-component>

# 显示过程
Component created
Component attached
Page onLoad
Page onShow
Component ready
Page onReady
## 销毁过程
Page onUnload
Component detached