Life Cycle 生命週期 in composition API

vue學習筆記

yenchenjulia 2024-02-16 11:07:23 ‧ 1073 瀏覽

分享至

前言
- 生命週期的相關內容其實翻了蠻多次，但之前因為急著用，所以並沒有很靜下心來研究整個循環到底在做什麼，概念很模糊，同樣也是用得很沒安全感，今天年假放完第一天，打算把這塊補上，但早上有點抓不到節奏，一下跳這一下跳那，不知道自己該從何學起，下午終於還是回到Vue官方文件，老老實實地啃英文，看不懂就不斷的重看，再這樣來來回回幾遍後，好像有點懂了。
試解釋SPA(Single Page Application)
- 早上亂看跳來跳去最大的收穫就是理解了SPA，所以在討論生命週期之前，很想提一下，這也是為什麼我們要用Vue框架的原因之一。以前使用者在瀏覽器瀏覽網頁並按下網頁內任何可點擊位置，都會發送請求至伺服器，等待伺服器端準備妥善後回傳，較為耗時沒有效率。如果改以Vue框架的方式生成，它的概念是在同一個頁面下，當使用者點擊後，Vue隨即攔截並依指定請求更換適當組件後回傳，不再需要回到server端，縮短時間成本提升效率，而這樣以同一頁面不同組件實現的方式即為SPA。
試解釋生命週期
- 每一個vue檔案，有其生命週期，也就是整個檔案的從無到有再從有到無的過程，其實每個實質的東西都有其壽命，在每個階段，會有該階段必須發生的事，不能早也不能晚，例如一個小孩不同年齡有不同的補助津貼，必須在指定時間申請。到了入學的年齡，必須註冊登記入學，諸如此類，關於寫code，同樣要從一開始就得想個八九成，好好的把什麼時候該發生什麼事登記下來，以防歪樓，你說對吧！
- 官網很經典的示意圖如下：
- 以我目前的認知，有底色搭配白字的部分是動態過程，交代在當下Vue instance所做的事情
- 有色框白底是Vue instance各階段，同時有其對應的lifecycle hooks，有了這些hooks，我們就可以預先把該發生的事都登記在hook中，這些預先登記好的事件會在一開始setup()的階段，被同步呼叫並依序堆疊至call stack中，靜待生命週期發展到適當時機，使這些已登記的事件一一發生
Lifecycle Hooks
- setup(): 等同於Option API中的beforeCreate跟created階段，Vue instance成立，各事件狀態完成初始化
- onBeforeMount():Vue instance還沒與Template(Dom節點)綁定
- onMounted():Vue instance掛載完成，所以如有需要手動操作Dom API，要在此階段完成後再進行操作，以免操作的Dom節點被Vue.js替換掉
- onBeforeUpdate():當狀態被變動時，畫面同步更新前
- onUpdated():當狀態被變動時，畫面已同步更新完成
- onBeforeUnmount():Vue instance被銷毀前
- onUnmounted():Vue instance完成銷毀時，通常會使用它來清除計時器、事件監聽器及伺服器連結
- onErrorCaptured():子/孫代元件的錯誤被捕獲時觸發
心得
筆記寫一寫，有個困惑點，所以我所有的函式都要安穩地先登記在各階段嗎？跟實作上好像有差異，思考一下之後，自己目前的理解是很明確在那一個階段必須發生的事情才會先登記，例如小孩7歲就是要讀國小，這種很明確的大事，而養小孩的過程，會有許許多多因小孩而異的不同事件，比如有的要去學鋼琴，有的要去學畫畫，在開發上就是先用函式表達，等要用到時再呼叫，而不需要一開始就登記在Lifecycle hook上。
寫完這篇，以養小孩類比的方式，確實讓我更能理解其中的意義，未來使用上應該也會來得比較直覺。
參考資料