對於剛接觸vue一兩個月、才僅僅獨立做過一兩個vue項目的小白來說，以前一直自我感覺自己知道vue的生命周期，

直到前兩天去面試，面試官讓我說一下vue的生命周期。。。

其實我的心中是有那張圖的，但是因為學習、分析的年代久遠，心中有圖卻不知道怎麽表述，成了個能發聲的啞巴，

最後也就只能按順序說出了那幾個鉤子函數，真是憋足了氣！

直到今天一鼓作氣二刷生命周期，我才恍然大悟，原來我之前的理解中，潛意識裏一直是把那幾個鉤子函數當做了vue的生命周期！

簡直了，想想那天，面試官肯定在心裏把我鄙視死了吧！

好了不扯了，直接說我今天看完後，自我感覺還很好的新的理解吧。

也許日後再深入接觸後，會發現今天的理解也很淺顯，但是至少今天比我前天好多了哈哈。

生命周期：就是從一個組件或者實例開始被初始化、創建開始到這個實例被銷毀或者結束的一個過程。

　　　　 在這個過程中vue給我們提供了很多的方法，也就是所說的生命周期鉤子函數。

由此：真正的生命周期是一個流程，而不是單單那幾個鉤子函數，鉤子函數只是用來提醒我們生命周期走到哪一步的回調函數。

在我粗淺的理解下，我暫時把vue的生命周期統分成五大區塊

一、創建（初始化）

二、查找與處理（找到組件並渲染）

三、掛載（插入）

四、更新（重新渲染並插入）

五、銷毀（卸載所有）

其中每一大塊又分幾個小的步驟，但是大體規律又是如出一轍：

• 本區塊開始前（一個區塊流程開始的鉤子告訴你）
• 本區塊開始中
• 本區塊開始後（一個區塊流程完畢的鉤子告訴你）

好像都是廢話哈哈，但我真的對這一點的感受很深刻。

接下來一個一個來

就像我們人從生下來到死這麽一個過程，要有這個流程，先得開始：

一、創建部分

new Vue( 這句代碼，初始化一個vue實例，開始創建一個vue對象

　生命周期開始，init event初始化事件，為當前實例做基礎配置；

創建之前，這裏提供一個鉤子函數，beforeCreate 開始創建鉤子，

　　這個時候還啥也沒做呢，頁面一片空白，可以在頁面中先展示一個loading組件，給用戶一個友好體驗；

創建中，init injections & reactivity 創建過程中，data屬性被成功綁定，dom未生成；

創建之後，這裏提供一個鉤子函數，created 創建完畢鉤子，

　　這個時候vue對象實例化完畢，dom依舊未生成，頁面空白，

　　可以在這裏ajax獲取數據賦給data屬性了，以便日後使用；

二、查找部分

也就是new Vue()括號裏邊的參數開始被執行解析的過程：

查找el屬性的對應內容，如果值可以被找到，那麽繼續

　　如果找不到就去查是否在括號後邊掛載了$.mount()並有內容

　　　　如果都沒找到，生命周期結束；

如果順利的都找到了，就繼續往下查找{}內的下一個屬性template

　　如果template對應的值當中有組件或者有html內容，那麽也算查找成功，

　　　　如果都沒有，那麽生命周期結束!

至此，食材都準備好了，vue大廚開始開工吧！

此時，將template裏的內容放到render函數中開始渲染處理，即執行render方法渲染template裏的內容。

（這裏是對vue的語法進行解析嗎?）

題外話：

el其實就是日後要掛載vue組件的一個目標點，如果連目標都找不到，還活著幹嘛，幹脆結束

template就是日後要做的事情，如果都不知道自己接下來要去做什麽，還活著幹嘛，幹脆也結束

菜都準備好了總要上桌吧！

所有的dom結構都被渲染好了，vue語法也被解析成正常的html內容了，總要放到頁面展示了吧

　　於是繼續 :

三、掛載部分

開始掛載之前，這裏提供一個鉤子函數，beforeMount掛載前鉤子，

　　編譯template裏的內容並在虛擬dom中執行，頁面上依舊沒有任何展示；

掛載中，要做的事就是創建vm$.el，並替換到el元素，

　　這一段我也不是太理解，大概感覺就是將#app的那段空的div換成剛才vue生成好的虛擬dom；

掛載完畢，這裏提供一個鉤子函數，mounted掛載完畢鉤子，

　　至此，所有的dom結構和數據都被展示到頁面當中，

　　　　這時可以做一些事情，比如關掉之前展示的loading；

生命周期到這裏，也算初步完成了他的使命，

　　如果是一個純靜態頁不做任何修改展示的話，根本沒必要用到生命周期的後兩區塊內容了。

但是如果在mounted之後再對實例中的data屬性做操作的話，就會走進生命周期的另一個階段：更新

四、更新部分

依舊是那個套路，觸發了更新的開關後，會給一個開始更新的回調：

更新之前，這裏有一個鉤子函數，beforeUpdate開始更新前鉤子，

　　在這個鉤子裏可以提供一個彈窗提示用戶確認跟新啥的。或者再展示一個loading；

更新中，vue實例要開始將舊數據替換為新數據，在虛擬dom中重新渲染，

　　虛擬dom開始改變，但是頁面這時沒有任何變化，因為只是改的虛擬dom，還並未真正修改dom結構；

更新完畢，這裏有一個鉤子函數，updated更新後鉤子，

　　這時真正的dom結構被徹底替換，頁面展示上也會發生改變，

　　　　在這個鉤子裏可以提供一個彈窗告訴用戶更新完畢。同時去掉loading彈層啥的；

如果執行了vm.$destory,就會進入到最後一個部分

五、銷毀部分

同上

開始銷毀vue實例之前，會有一個鉤子函數提示開發者組件要開始銷毀：beforeDestory開始銷毀鉤子，

　　在這個鉤子中我們可以提醒用戶是否刪除等，或者做一些開發者與業務有關的相關操作；

銷毀中，vue這時的主要目標就是卸載，就像人要洗澡前各種脫一樣（具體就不要想象了！），

　　他要卸載在身上的各種監聽、各種事件，

　　　　比如watchers（我沒用過沒有發言權）、子組件child components、事件event；

銷毀後，這時再次提供最後一個鉤子函數，destoryed銷毀完畢，

　　在這裏我們可以提示用戶刪除完畢啥的，也可以清空我們自己的定時器或者做一些其他善後工作；

到這一步，此次整個vue實例的生命周期就徹底結束了。

以上，僅是自己了解vue後再刷生命周期圖的二次理解，僅代表個人的理解，

不一定完全正確，歡迎指正，最後也別全信。畢竟絕知此事要躬行。

最後，貼一張一刷時自己備註的官網生命周期圖，對照著圖再去理解我的總結應該更好。

哇塞，認真學習了16分鐘，記錄草稿後，加上自己理解對樹講述了兩遍後，一口氣2000字的心得寫下來了。

真的是畫竹要先胸有成竹才行！

2018-06-09 14:07:16

vue - 生命周期第二次學習與理解