如何解釋vue的生命週期才能令面試官滿意？(copy過來的)

參考文檔:

• juejin.im/post/5ad108…
• mp.weixin.qq.com/s?__biz=MzA…

邊看文檔邊學嘍

生命週期

• 1.beforeCreate

  • detail:在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用。

• 2.created

  • detail:在實例建立完成後被當即調用。在這一步，實例已完成如下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

• 3.beforeMount

  • 在掛載開始以前被調用：相關的 render 函數首次被調用。該鉤子在服務器端渲染期間不被調用。

• 4.mounted

  • detail:el 被新建立的 vm.el 也在文檔內。

  注意 mounted 不會承諾全部的子組件也都一塊兒被掛載。若是你但願等到整個視圖都渲染完畢，能夠用 vm.$nextTick 替換掉 mounted:

  該鉤子在服務器端渲染期間不被調用。

  mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) }

• 5.beforeUpdate

• detail:數據更新時調用，發生在虛擬 DOM 打補丁以前。這裏適合在更新以前訪問現有的 DOM，好比手動移除已添加的事件監聽器。

該鉤子在服務器端渲染期間不被調用，由於只有初次渲染會在服務端進行。

• 6.updated
  • detail:因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。

當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態。若是要相應狀態改變，一般最好使用計算屬性或 watcher 取而代之。

注意 updated 不會承諾全部的子組件也都一塊兒被重繪。若是你但願等到整個視圖都重繪完畢，能夠用 vm.$nextTick 替換掉 updated：

updated: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been re-rendered }) }

該鉤子在服務器端渲染期間不被調用。

• 7.beforeDestory
  • detail:實例銷燬以前調用。在這一步，實例仍然徹底可用。

該鉤子在服務器端渲染期間不被調用。

• 8.destoryed
  • detail:Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

該鉤子在服務器端渲染期間不被調用。