HAPPY LIFE AND cODING

vue-生命週期

vue-生命週期

組件如同人一樣,都會經歷出生到死亡的過程。這一系列過程稱為『生命週期』。

對於vue組件而言,它的生命週期主要有8個階段,但可以分拆分4大項來說分別為 (1)創建階段 (2)模板編譯裝載階段 (3) 更新資料階段 (4)銷毀階段。其中還有2個,是用到 keep-alive後,才會出現的。而不同階段,都會有特殊使命。以下分別描述不同階段生命週期的內容。

(1) 創建階段

  • beforeCreate : 已經初始化一個空的 vue 實例,和一些默認事件和生命週期涵式,其它物件未創件。這階段data 和methods 是拿不到東西的。
  • created: 已經初始化數據和方法。這階段data 和methods 就拿的到了,但畫面還沒渲染完成

(2) 模板編譯裝載階段

開始編譯模版,生成一個編譯好的模版字串,並渲染成虛擬dom,先放在記憶中。還沒掛載到頁面上。

  • beforeMount : 模版編譯完成。但尚未把模版,渲染到頁面中
  • mounted: 模版已經掛載到 bowser頁面上。使用者就可以看到已渲染完成的頁面。並且可以操作DOM元素

(3) 更新資料階段

當資料發生改變就會觸發此階段

  • beforeUpdate : data 資料被更新,但畫面還是舊的。
  • update:畫面更新完畢

(4) 銷毀階段

  • beforeDestroy : 組件準備銷毀。
  • destroyed : 銷毀自定義意綁定事件、監聽器和組件。

============================================================================

上面敘述的生命週期都是單一組件時發生的,但是如果是父子組件,那它的生命週期調用順序會如何?在這邊畫了一張圖,來幫助記憶。

關於 keep-alive

剛上面提到還有2個生命週期鉤子,分別是: activated 和  deactivated,但須配合 keep-alive。那甚麼是keep-alive 呢?

舉個例子來說:當組件如果需要頻繁切換,但又不用重新需渲染(不在重新跑生命週期)時,或者是說,你想維持原本資料狀態,就可以使用keep-alive,目前想到的實際運用例子是 : 有時候要填表單,它有好幾個步驟,必須一序填完,才能去下步驟,但有時發現填的不對,想回頭修改上一步驟的資料,這時候keep-alive就靠譜了!!。

所以啦!它目地是為了緩存組件。也可以算是性能優化的一部分唷!