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

生命週期：就是從一個元件或者例項開始被初始化、建立開始到這個例項被銷燬或者結束的一個過程。

　　　　　這個過程比如官網表述的：在過程中需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等

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

　　　　　在例項生命週期的不同階段藉助這些鉤子函式，“”

由此：真正的生命週期是一個流程，而不是單單那幾個鉤子函式，鉤子函式只是用來在流程的不同階段幫助我們做更多的事情。

 

在我粗淺的理解下，我暫時把vue的生命週期統分成五大區塊（個人的劃分）

一、建立（初始化）

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

三、掛載（插入）

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

五、銷燬（解除安裝所有）

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

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

• 本區塊開始中

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

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

 

接下來一個一個來

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

一、建立部分

new Vue(  這句程式碼，初始化一個vue例項，開始建立一個vue物件

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

 

建立之前，這裡提供一個鉤子函式，beforeCreate 開始建立鉤子，

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

 

建立中，init injections & reactivity 建立過程中，data屬性被成功繫結，dom未生成；

 

建立之後，這裡提供一個鉤子函式，created 建立完畢鉤子，

　　這個時候vue物件例項化完畢，dom依舊未生成，頁面空白，

　　但是，：資料觀測 (data observer)，屬性和方法的運算，watch/event 事件回撥。

　　可以在這裡ajax獲取資料賦給data屬性了，以便日後使用；

 

 

二、查詢部分

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

new Vue({
    
    el: '#app',
    
    router,
    
    store,
    
    template: '
　　如果都沒找到，生命週期結束；
 
如果順利的都找到了，就繼續往下查詢{}內的下一個屬性template
　　如果template對應的值當中有元件或者有html內容，那麼也算查詢成功，
　　如果為空，繼續查詢render屬性值是否為空
 
緊接著，如果{}選項中存在渲染函式render，
　　那麼template將被忽略,因為render渲染函式是字串模板的代替方案，
　　　　render可以讓你發揮 JavaScript 最大的程式設計能力，而不用寫template的靜態模板
　　如果沒有或為空，template字串模板將會替換掛載的元素，即el的屬性值
　　　　
　　如果template和render都不存在，則生命週期結束。
查詢階段彙總：
　　Vue 選項中的 函式若存在，則 Vue 建構函式不會從 template 選項或透過 el 選項指定的掛載元素中提取出的 HTML 模板編譯渲染函式。
 
至此，食材都準備好了，vue大廚開始開工吧！
此時，將template裡的內容放到render函式中開始渲染處理，即執行render方法渲染template裡的內容。
（這裡是對vue的語法進行解析嗎?）
 
題外話：
el其實就是日後要掛載vue元件的一個目標點，如果連目標都找不到，還活著幹嘛，乾脆結束
template/render就是日後要做的事情，如果都不知道自己接下來要去做什麼，還活著幹嘛，乾脆也結束
做人，又何嘗不是如此。
 
 
菜都準備好了總要上桌吧！
所有的dom結構都被渲染好了，vue語法也被解析成正常的html內容了，總要放到頁面展示了吧：
三、掛載部分
開始掛載之前，這裡提供一個鉤子函式，beforeMount掛載前鉤子，
　　編譯template裡的內容並在虛擬dom中執行，頁面上依舊沒有任何展示；
 
掛載中，要做的事就是建立vm$.el，並替換到el元素，
　　這一段我也不是太理解，大概感覺就是將#app的那段空的div換成剛才vue生成好的虛擬dom；
 
掛載完畢，這裡提供一個鉤子函式，mounted掛載完畢鉤子，
　　el 被新建立的 vm.$el 替換，並掛載到例項上去
　　至此，所有的dom結構和資料都被展示到頁面當中，
　　　　這時可以做一些事情，比如關掉之前展示的loading；
： mounted 不會承諾所有的子元件也都一起被掛載。如果你希望等到整個檢視都渲染完畢，可以用  替換掉 mounted
mounted: function () {

  this.$nextTick(function () {


    // Code that will run only after the


    // entire view has been rendered


  })

}


nextTick: 在dom結構更新後使用這個方法獲取最新的dom結構　　
 
 
 
生命週期到這裡，也算初步完成了他的使命，
　　如果是一個純靜態頁不做任何修改展示的話，根本沒必要用到生命週期的後兩區塊內容了。
但是如果在mounted之後再對例項中的data屬性做操作的話，就會走進生命週期的另一個階段：更新
四、更新部分
依舊是那個套路，觸發了更新的開關後，會給一個開始更新的回撥：
更新之前，這裡有一個鉤子函式，beforeUpdate開始更新前鉤子，
　　在這個鉤子裡可以提供一個彈窗提示使用者確認跟新啥的。或者再展示一個loading；
　　也可以手動移除已新增的事件監聽器
 
更新中，vue例項要開始將舊資料替換為新資料，在虛擬dom中重新渲染，
　　虛擬dom開始改變，但是頁面這時沒有任何變化，因為只是改的虛擬dom，還並未真正修改dom結構；
 
更新完畢，這裡有一個鉤子函式，updated更新後鉤子，
　　這時真正的dom結構被徹底替換，頁面展示上也會發生改變，
　　　　在這個鉤子裡可以提供一個彈窗告訴使用者更新完畢。同時去掉loading彈層啥的；
 
 updated 不會承諾所有的子元件也都一起被重繪。如果你希望等到整個檢視都重繪完畢，可以用  替換掉 updated：
updated: function () {

  this.$nextTick(function () {


    // Code that will run only after the


    // entire view has been re-rendered


  })

}
如果執行了vm.$destory,就會進入到最後一個部分
五、銷燬部分
同上
開始銷燬vue例項之前，會有一個鉤子函式提示開發者元件要開始銷燬：beforeDestory開始銷燬鉤子，
　　在這個鉤子中我們可以提醒使用者是否刪除等，或者做一些開發者與業務有關的相關操作；
 
銷燬中，vue這時的主要目標就是解除安裝，就像人要洗澡前各種脫一樣（具體就不要想象了！），
　　他要解除安裝在身上的各種監聽、各種事件, 各種繫結以及各種子元件例項銷燬，感覺像毀滅一切
　　　　比如watchers（我沒用過沒有發言權）、子元件child components、事件event；
 
銷燬後，這時再次提供最後一個鉤子函式，destoryed銷燬完畢，
　　在這裡我們可以提示使用者刪除完畢啥的，也可以清空我們自己的定時器或者做一些其他善後工作；
 
到這一步，此次整個vue例項的生命週期就徹底結束了。
以上，僅是自己瞭解vue後再刷生命週期圖的二次理解，僅代表個人的理解，
不一定完全正確，歡迎指正，最後也別全信。畢竟絕知此事要躬行。
 
最後，貼一張一刷時自己備註的官網生命週期圖，對照著圖再去理解我的總結應該更好。(檢視清晰大圖：右鍵新標籤頁開啟)