iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
1
自我挑戰組

前端史萊姆與Vue的三十天時光冒險系列 第 13

Day13 萬丈高樓平地起(1):Vue 的生命週期

本文同步發表於斜槓女紙部落格:Day13 萬丈高樓平地起(1):Vue 的生命週期

Day13 萬丈高樓平地起(1):Vue 的生命週期

生活的道路一旦選定了,就要勇敢的走下去。是的,一旦報名鐵人賽,就要認真的寫下去。
....鐵人賽的小格言好勵志

為了能順利湊完30天的文章,今天要來跟大家拉賽一下觀念篇:Vue 的生命週期

每個 Vue 實體被創建之前,會經過一系列初始化的過程,包含在原始資料加料、建立Vue Instance、編譯樣板、綁定資料等,隨著資料新增修改,週而復始直到刪除,執行的同時會呼叫這些生命週期的虎克船長掛鉤(hook),我們可以在這些掛鉤上做額外的處理。

雖然一開始開發時若不了解 Vue 的生命週期 對開發的結果影響不大,像我coding到目前為止也沒感覺有什麼差異。但如果觀念正確的話,對未來近接使用也體有幫助的唷!

看著圖表來輔助一下,官方介紹圖第一次看的話應該會跟我一樣一頭霧水,所以我光明正大偷拿重製老師的範例圖給大家看看

Vue 的生命週期示意圖

  • beforeCreate:實體初始化。
  • Created:實體建立完成。資料 $data 已可取得,但 $el 屬性還未被建立。
  • beforeMount:執行元素掛載之前。
  • mounted:元素已掛載, $el 被建立。
  • beforeUpdate:當資料變化時被呼叫,還不會描繪 View。
  • updated:DOM 的更新已經完成,View 被顯示在畫面上。
  • activated:如果有設定 keep-alive,這個掛鉤會被呼叫。
  • deactivated:停用 keep-alive時被呼叫。
  • beforeDestroy:實體還可使用。
  • destroyed:實體銷毀。所有綁定被解除、事件偵聽被移除、子實體也被銷毀。

註:它們的資料型態全都是 Function。

實際範例

Vuejs建立之前會先進入beforeCreate階段,可以看到console中跳出訊息

 beforeCreate

接下來一路進展到activated階段,此時若我們修改/新增input的文字內容,也可以在console中看到即時出現的訊息。

updated

若有需要保留資訊在生命週期內,不被刪除資料的話,可使用keep-alive保留該元件的狀態。


created VS mounted

到這兒我衍伸了一個疑問,看了很多大神的程式碼發現,有些人在created呼叫API,而有些則是在mounted呼叫,在這兩者中呼叫會有什麼差異嗎?

詢問了老師以後以後得到的答案如下:

ans

這邊稍稍整理一下我所理解的部分

  • created 狀態,可以先取得資料,但此時還沒綁定 DOM 元素,所以能在之後的 mounted 狀態綁定並渲染
  • 在 mounted 狀態取得資料,當資料回傳回來時 data 取得資料,會觸發 beforeUpdate 更新內容並重新渲染畫面
  • mounted 通常是在一些插件的使用或者組件的使用中進行操作,比如插件 chart.js 的使用
  • created在渲染頁面之前使用,通常是用來渲染頁面。mounted通常是在渲染頁面之後,用來操作dom節點
  • 通常情況下使用created比較多,使用mounted相對少一些,一些情況使用mounted可能會報錯。

開始反想該不會我的ajax放錯位置了?默默地將mounted改成created,持續嚐試第2組API串接中,如果成功後再來跟大家分享結果,今天就先到這兒囉~


參考資料


上一篇
Day 12 喘口氣,打好基礎再繼續攻城掠地
下一篇
Day14 萬丈高樓平地起(2):Vue 的生命週期中的同步非同步
系列文
前端史萊姆與Vue的三十天時光冒險30

尚未有邦友留言

立即登入留言