手摸手帶你入門ionic3(七)：生命週期

這一節咱們來說講界面的生命週期，在此以前須要讓你們熟悉下堆棧式導航的相關內容。須要說起的兩個概念是，當一個頁面對咱們是可見的，那它就是active，假如不可見，那就是inactive。堆棧式導航的意思很簡單，一幅圖能夠說明。假設一個場景，從A界面跳轉到B界面，而後B界面返回至A界面（注意是返回，不是跳轉）界面的堆棧圖以下：

從A界面跳轉到B界面，A界面並無被銷燬，而是被壓入堆棧，變得inactive，B界面進入堆棧在最上面，變成active。假如返回至A界面，此時B界面被銷燬，而不是inactive，A界面在堆棧最上面，從新變成active。

B界面從被建立，進入堆棧，變成active，而後返回至上一界面，被銷燬，這個過程當中ionic提供了函數對其進行了監控，也就是生命週期函數。仍是先寫代碼，經過現象來解釋：

home.ts

...
constructor(public navCtrl : NavController) {
    console.log("HomePage constructor");
  }

...

  ionViewDidLoad() {
    console.log('HomePage ionViewDidLoad');
  }

  ionViewWillEnter() {
    console.log('HomePage ionViewWillEnter');
  }

  ionViewDidEnter() {
    console.log('HomePage ionViewDidEnter');
  }

  ionViewWillLeave() {
    console.log('HomePage ionViewWillLeave');
  }

  ionViewDidLeave() {
    console.log('HomePage ionViewDidLeave');
  }

  ionViewWillUnload() {
    console.log('HomePage ionViewWillUnload');
  }

  ionViewCanEnter() {
    console.log('HomePage ionViewCanEnter');
  }

  ionViewCanLeave() {
    console.log('HomePage ionViewCanLeave');
  }
複製代碼

normal-load.ts

..
constructor(public navCtrl : NavController, public navParams : NavParams) {
    // 變量初始化，獲取從上一界面傳過來的參數
    console.error("HomePage constructor");
    this.name = this.navParams.get('name');
    this.age = this.navParams.get('age');
  }

  ionViewDidLoad() {
    // 界面加載完成運行，而且只運行一次，在這裏能夠進行網絡請求，訂閱事件等操做
    console.error('NormalLoadPage ionViewDidLoad');
  }

  ionViewWillEnter() {
    // 當界面將要成爲active的時候運行，用的比較少
    console.error('NormalLoadPage ionViewWillEnter');
  }

  ionViewDidEnter() {
    // 界面每次變成active的時候都會運行，常見的使用場景是每次進入此界面都從新從網絡獲取數據
    console.error('NormalLoadPage ionViewDidEnter');
  }

  ionViewWillLeave() {
    // 界面將要離開的時候
    console.error('NormalLoadPage ionViewWillLeave');
  }

  ionViewDidLeave() {
    // 界面已經離開的時候，不在是active
    console.error('NormalLoadPage ionViewWillLeave');
  }

  ionViewWillUnload() {
    // 當界面被銷燬的時候，這兒能夠執行取消訂閱等操做
    console.error('NormalLoadPage ionViewWillUnload');
  }

  ionViewCanEnter() {
    // 經過返回true或者false來決定是否能夠進入此界面，返回true是能夠
    console.error('NormalLoadPage ionViewCanEnter');
  }

  ionViewCanLeave() {
    // 經過返回true或者false來決定是否能夠離開此界面，返回true是能夠，這兒能夠進行判斷數據是否提交等操做
    console.error('NormalLoadPage ionViewCanLeave');
  }
複製代碼

界面全部相關的生命週期函數都在上面，每一個函數中的意思以及相關常見的操做都在註釋中，在此再也不贅述。

咱們在HomePage和NormalLoadPage兩個界面中寫上生命週期函數，而後執行從HomePage跳轉到NormalLoadPage，而後返回這個操做。ionic serve運行項目，執行上述操做，而後看下日誌，以下圖：

上圖能夠看出，並非HomePage界面的生命週期函數執行完，才執行NormalLoadPage界面的生命週期函數。他們各自的生命週期函數是穿插在一塊兒的。HomePage界面的ionViewWillUnload函數始終沒執行，這是由於在堆棧下，只是inactive，並無被銷燬。當NormalLoadPage返回時被銷燬，因此它的ionViewWillUnload才執行了。另外HomePage的ionViewDidLoad只在界面建立的時候執行了一次，從NormalLoadPage返回後界面active的時候並未再次執行，ionViewDidEnter又從新執行了一次。

其餘的調用順序所有在圖上，就不解釋了。