微信小程式最全面Component元件生命周期

Component元件生命周期

• 使用miniprogram-computed
• 參考

const app = getApp()

Component({
  behaviors: [require('miniprogram-computed')],
  /**
   * 使用全局樣式屬性
   */
  options: {
    addGlobalClass: true
  },
  /**
   * 元件的屬性清單
   */
  properties: {
  },
  /**
   * miniprogram-computed提供計算屬性
   */
  computed: {
  },
  /**
   * 自帶的監聽器
   */
  observers: {
  },
  /**
   * miniprogram-computed提供監聽器
   */
  watch: {
  },
  /**
   * 元件的初始資料
   */
  data: {
  },
  /*元件生命周期*/
  lifetimes: {
    created: function () {
      console.log("在元件執行個體剛剛被建立時執行")
    },
    attached: function () {
      console.log("在元件執行個體進入頁面節點樹時執行")
    },
    ready: function () {
      console.log("在元件在視圖層布局完成後執行")
    },
    moved: function () {
      console.log("在元件執行個體被移動到節點樹另一個位置時執行")
    },
    detached: function () {
      console.log("在元件執行個體被從頁面節點樹移除時執行")
    },
    error: function () {
      console.log("每當元件方法抛出錯誤時執行")
    }
  },
  /*元件所在頁面的生命周期 */
  pageLifetimes: {
    show: function () {
      // 頁面被展示
      console.log("頁面被展示")
    },
    hide: function () {
      // 頁面被隐藏
      console.log("頁面被隐藏")
    },
    resize: function (size) {
      // 頁面尺寸變化
      console.log("頁面尺寸變化")
    }
  },
  /**
   * 元件的方法清單
   */
  methods: {
  }
})
           

使用miniprogram-computed

可以參考我的另外一個文章

微信小程式使用miniprogram-computed遇到的問題

參考

• 微信小程式生命周期、頁面生命周期、元件生命周期
• 微信小程式computed
• 微信小程式Component