vue使用總結-生命週期篇

暴走的snail發表於2018-09-17
Vue
工作之初使用的angularjs框架，從那時開始資料雙向繫結的思想就深深的吸引了我。那是剛入門並沒有深究angularjs實現雙向繫結的原理。所以至今對angularjs也是一知半解。在工作半年左右接觸了vue，開始使用它作為主要的開發框架。使用至今已有兩年多了，期間也對其原始碼進行過研究。vue的各種理念也都比較瞭解。最近有空總結下自己對vue各個知識點的理解。

 vue生命週期示例圖

vue使用總結-生命週期篇

上圖描述了vue 的生命週期，下面我們根據此圖來詳細瞭解下vue從初始化到結束都做了些什麼。

1. 創生created

 對vue熟悉的人都知道，vue是封裝在vue的函式中的，

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)//初始化開始
}
複製程式碼

當我new vue時候，此時vue開始他的生命旅程。此時呼叫init函式，初始化vue的事件，props，methods，data，computed和watch **

2. 掛載mount

 資料初始結束後，如果可以找到el則開始掛載DOM元素。

 開始編譯：此時判斷是否有render函式，如果有就不做處理直接執行mount.call(this, el, hydrating)。如果沒有render函式，則獲取template，template可以是#id、模板字串、dom元素，如果沒有template，則獲取el以及其子內容作為模板，然後開始編譯模板，編譯完成呼叫render函式生成DOM元素。現在我們可以看到頁面顯示的內容了。 

3. 更新update

頁面繫結的資料修改後，更新dom結構，即vdom的diff演算法。Vue和React在更新dom時，使用的演算法相同，都是基於snabbdom。 update中最終要的一環便是資料patch，vue中呼叫patch方法來分析DOM元素的結構變化。下面簡述下patch流程：

return function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
 ... let isInitialPatch = false const insertedVnodeQueue = []
 if (isUndef(oldVnode)) { 
     ... 
   } else {
      // oldValue不是VNode，而是真實的dom元素 const isRealElement = isDef(oldVnode.nodeType)
     if (!isRealElement && sameVnode(oldVnode, vnode)) {
     //判斷兩個vnode可不可以複用為一個節點 
     // patch existing root node patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
     //執行patchVnode方法 } else {
      // } 
     invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch) return vnode.elm }
複製程式碼

  vue中的update是vue知識點中比較重要的知識，此生命週期中最重要的是diff演算法。由於內容較多這裡就不詳述，有興趣的小夥伴可以去了解下[vue原始碼分析](https://github.com/liutao/vue2.0-source/blob/master/patch%E2%80%94%E2%80%94diff.md) 

4. 結束destroy

任何事物有始必有終，vue當然也不例外。在vue中destroy用來結束他的生命週期，當離開當前元件時會自動觸發destroy，當然我們也可以手動觸發。 

手動銷燬vue需要注意：destroy會完全銷燬一個例項。清理它與其它例項的連線，解綁它的全部指令及事件監聽器。也就是說他不會刪除頁面的DOM元素。





相關文章