<script>
/**
 * Vue生命週期解析
 */
export default {
  /**
   * name: name
   * type: string
   * explain: 允許元件模板遞迴地呼叫自身。
   * 注意，元件在全域性用 Vue.component() 註冊時，全域性 ID 自動作為元件的 name。
   * 指定 name 選項的另一個好處是便於除錯。有名字的元件有更友好的警告資訊。
   * 另外，當在有 vue-devtools，未命名元件將顯示成 <AnonymousComponent>，這很沒有語義。
   * 通過提供 name 選項，可以獲得更有語義資訊的元件樹。
   */
  name: "home",
  /**
   * name: data
   * type: object | function
   * explain: Vue 例項的資料物件。
   * Vue 將會遞迴將 data 的屬性轉換為 getter/setter，從而讓 data 的屬效能夠響應資料變化。
   */
  data: function() {
    return {
      explain: "home"
    };
  },
  /**
   * name: beforeCreate
   * type: function
   * explain: 在例項初始化之後，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫
   */
  beforeCreate: function() {
    console.log("home beforeCreate");
  },
  /**
   * name: created
   * type: function
   * explain: 在例項建立完成後被立即呼叫。在這一步，例項已完成以下的配置：資料觀測 (data observer)，
   * 屬性和方法的運算，watch/event 事件回撥。然而，掛載階段還沒開始，$el 屬性目前不可見。
   */
  created: function() {
    console.log("home created");
  },
  /**
   * name: beforeMount
   * type: function
   * explain: 在掛載開始之前被呼叫：相關的 render 函式首次被呼叫。該鉤子在伺服器端渲染期間不被呼叫。
   */
  beforeMount: function() {
    console.log("home beforeMount");
  },
  /**
   * name: mounted
   * type: function
   * explain: el 被新建立的 vm.$el 替換，並掛載到例項上去之後呼叫該鉤子。
   * 如果 root 例項掛載了一個文件內元素，當 mounted 被呼叫時 vm.$el 也在文件內。
   * 注意 mounted 不會承諾所有的子元件也都一起被掛載。
   * 如果你希望等到整個檢視都渲染完畢，可以用 vm.$nextTick 替換掉 mounted：
   * 該鉤子在伺服器端渲染期間不被呼叫。
   */
  mounted: function() {
    console.log("home mounted");
    this.$nextTick(function() {
      console.log("home mounted $nextTick");
    });
  },
  /**
   * name: beforeUpdate
   * type: function
   * explain: 資料更新時呼叫，發生在虛擬 DOM 打補丁之前。
   * 這裡適合在更新之前訪問現有的 DOM，比如手動移除已新增的事件監聽器。
   * 該鉤子在伺服器端渲染期間不被呼叫，因為只有初次渲染會在服務端進行。
   */
  beforeUpdate: function() {
    console.log("home beforeUpdate");
  },
  /**
   * name: updated
   * type: function
   * explain: 由於資料更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會呼叫該鉤子。
   * 當這個鉤子被呼叫時，元件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。
   * 然而在大多數情況下，你應該避免在此期間更改狀態。
   * 如果要相應狀態改變，通常最好使用計算屬性或 watcher 取而代之。
   * 注意 updated 不會承諾所有的子元件也都一起被重繪。
   * 如果你希望等到整個檢視都重繪完畢，可以用 vm.$nextTick 替換掉 updated：
   * 該鉤子在伺服器端渲染期間不被呼叫。
   */
  updated: function() {
    console.log("home updated");
    this.$nextTick(function() {
      console.log("home updated $nextTick");
    });
  },
  /**
   * name: activated
   * type: function
   * explain: keep-alive 元件啟用時呼叫。
   * 該鉤子在伺服器端渲染期間不被呼叫。
   * 構建元件 - keep-alive  https://cn.vuejs.org/v2/api/#keep-alive
   * 動態元件 - keep-alive  https://cn.vuejs.org/v2/guide/components.html#keep-alive
   */
  activated: function() {
    console.log("home activated");
  },
  /**
   * name: beforeDestroy
   * type: function
   * explain: 例項銷燬之前呼叫。在這一步，例項仍然完全可用。
   * 該鉤子在伺服器端渲染期間不被呼叫。
   */
  beforeDestroy: function() {
    console.log("home beforeDestroy");
  },
  /**
   * name: destroyed
   * type: function
   * explain: Vue 例項銷燬後呼叫。
   * 呼叫後，Vue 例項指示的所有東西都會解繫結，
   * 所有的事件監聽器會被移除，所有的子例項也會被銷燬。
   * 該鉤子在伺服器端渲染期間不被呼叫。
   */
  destroyed: function() {
    console.log("home destroyed");
  }
  /**
   * name: errorCaptured (2.5.0+ 新增)
   * type: (err: Error, vm: Component, info: string) => ?boolean
   * explain: 當捕獲一個來自子孫元件的錯誤時被呼叫。
   * 此鉤子會收到三個引數：錯誤物件、發生錯誤的元件例項以及一個包含錯誤來源資訊的字串。
   * 此鉤子可以返回 false 以阻止該錯誤繼續向上傳播。
   * !: 你可以在此鉤子中修改元件的狀態。
   * 因此在模板或渲染函式中設定其它內容的短路條件非常重要，
   * 它可以防止當一個錯誤被捕獲時該元件進入一個無限的渲染迴圈。
   * 錯誤傳播規則: 預設情況下，如果全域性的 config.errorHandler 被定義，
   * 所有的錯誤仍會發送它，因此這些錯誤仍然會向單一的分析服務的地方進行彙報。
   * 如果一個元件的繼承或父級從屬鏈路中存在多個 errorCaptured 鉤子，則它們將會被相同的錯誤逐個喚起。
   * 如果此 errorCaptured 鉤子自身丟擲了一個錯誤，則這個新錯誤和原本被捕獲的錯誤都會發送給全域性的 config.errorHandler。
   * 一個 errorCaptured 鉤子能夠返回 false 以阻止錯誤繼續向上傳播。
   * 本質上是說“這個錯誤已經被搞定了且應該被忽略”。
   * 它會阻止其它任何會被這個錯誤喚起的 errorCaptured 鉤子和全域性的 config.errorHandler。
   */
  //   errorCaptured 例項暫無，後期會更新上
};
</script>