vue入門教程系列二組件的生命週期

前言

工做之初使用的angularjs框架，從那時開始數據雙向綁定的思想就深深的吸引了我。那是剛入門並無深究angularjs實現雙向綁定的原理。因此至今對angularjs也是隻知其一;不知其二。在工做半年左右接觸了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元素。