iT邦幫忙

1

Vue 生命週期 自學筆記

終於進入生命週期的部分拉,所謂生命週期就如同人的生老病死,而程式不外乎也會經過這個流程。

https://ithelp.ithome.com.tw/upload/images/20200716/20126182eNLihkPevN.png

創建階段

beforecreate(少用)

首先 Vue Instance 、 Component(組件/元件)初始化之後,數據觀測(data observer) 和 enent /watcher 事件配置之前被呼叫,在此處可以讀到Vue,但無法讀取自己所產生的資料(如computed,methods等等)。

created

再來經過 Injection & reactivity(如data,computed,methods等等) 的初始化後,Vue Instance 、 Component(組件/元件)創建完成,資料已經可以讀取,屬性已經綁定,但是DOM還未生成,且$el 屬性還不存在

el&template之判斷

再來要進入beforeMount之前,會判斷我們是否有掛載點($el),如果沒有會wait,直到Vue實體呼叫vm.$mount(el),而後如果有掛載點,或沒有但呼叫mount之後,就會判斷否有使用template(模板),如果有就render template,如果沒有就走el,用el這個外層HTML去當作要掛載的位置

掛載階段

beforeMount

$el 已經被創建,能找到對應的template, 並編譯成render function(在此還沒掛載模板)

mounted

新創建的 vm$el 取代掉原本寫好的$el(如#app上的html),並掛載到Instance上去之後呼叫hook,此時才正式掛載至畫面上(在此才可操作Jqery等等)

更新階段

beforeUpdate(頻繁出現)

數據更新之前被呼叫,發生在虛擬 DOM 重新渲染之前,可以在這個 hook 中進一步改變狀態,並不會觸發附加的重新渲染過程

Updated

進行數據的修改、新增等,由於數據更改導致虛擬 DOM 重新渲染,在這裡之後會呼叫該hook

activated

activated只有在有這個標籤的時候才會觸發

deactivated

只有在有這個標籤退出時觸發 deactivated

破壞階段

beforeDestroy(整個生命週期最後可操作資料的地方)

實例銷毀之前呼叫,在這一步,實例仍完全可以使用,可用來關閉計時器、移除自訂事件增聽等等

destroyed

Vue 實例銷毀後呼叫。呼叫後,Vue 實例指示的所有東西都會解綁定,所有的事件監聽器會被移除,所有的子實例也會被銷毀。該hook在服務器端渲染期間不被呼叫。

實例操作

總共有兩層一層為Root,裡面有component層。

一、創建最外層Root

首先0號也就是最外層Root,會前後進入beforecreate、create、beforeMount,接著會等待一段時間,為什麼呢?因為Vue的生命週期有個特性,如果我們肚子裡還有其他component,還有其他東西要產的話,就會去做等待,可發現接著1號也按順序beforecreate、create、beforeMount,直到mounted以後,0號也才會mounted。

https://ithelp.ithome.com.tw/upload/images/20200716/20126182sUICDl6So9.png

二、在內層創建新的component

接著,我們在創建一個新的component,首先最外層也就是我們的0號,在數據更新之前,先進入beforeUpdate,而後我們產生一個新的component(3號),先後進入beforecreate、create、beforeMount、直到mounted以後0號也才會Updated更新完成,此處也釐清一個觀念,最外層(0號)的mounted是mounted到我們的網頁,而內層(3號、1號...)的mounted是mounted我們0號的裡面。

https://ithelp.ithome.com.tw/upload/images/20200716/20126182NcomJ00PCi.png

三、更新內層component的資料

接著,我們根據內層的component,去做資料的修改,當我們將3號的資料count+1,會先後進入beforeUpdate、Updated,而只要我們component還在畫面上,且我們有更動資料,更新階段就會不斷循環

https://ithelp.ithome.com.tw/upload/images/20200716/20126182PeMY59kbaT.png

四(一)、刪除其中一個component

銷毀的其中一個方法,我們現在總共有1號及3號的component,而我們在此刪除1號的component,而在刪除同時,外層也會被更新,所以0號會經過beforeUpdate,而後被我們所刪的1號component就會進入beforeDestroy、destroyed,成功被銷毀掉後,外層(0號)才會完成更新進入Updated

https://ithelp.ithome.com.tw/upload/images/20200716/20126182elXHk0RdlE.png

四(二)、刪除其中一個component

此方法,如果不知道自己在幹嘛,盡量少用自毀機制,因為會導致畫面及資料不連貫,首先我們已經在component(3號)上設置了一個destroyed的屬性為false,當點下按鈕(self destroy),會將destroyed變為true,而因為資料改了會先進入beforeUpdate、Updated,而後才會進入beforeDestroy、destroyed。

https://ithelp.ithome.com.tw/upload/images/20200716/20126182jCEbujZc2w.png

此時,我們發現dev tool中component已經消失,但畫面上還是看的到,而我們怎麼點他都是沒有反應,因為此時這個component已經不屬於Vue管理的範圍,那我們要如何將其移除畫面呢?直接從資料中將其移除即可,而移除時,由於我們此component已經移除了,所以只有畫面會更新,也就是0號進入beforeUpdate、Updated。

https://ithelp.ithome.com.tw/upload/images/20200716/20126182IeKjZTtdMR.png

https://ithelp.ithome.com.tw/upload/images/20200716/20126182QO3UWg0UoV.png

此文章圖及部分內容來自
https://ithelp.ithome.com.tw/articles/10215884
https://www.youtube.com/watch?v=aT9mP9vz3AY&list=PLEfh-m_KG4dYor8h4Hi2lqKJ0xqNTFh16&index=11


尚未有邦友留言

立即登入留言