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

前言

工做之初使用的angularjs框架,從那時開始數據雙向綁定的思想就深深的吸引了我。那是剛入門並無深究angularjs實現雙向綁定的原理。因此至今對angularjs也是隻知其一;不知其二。在工做半年左右接觸了vue,開始使用它做爲主要的開發框架。使用至今已有兩年多了,期間也對其源碼進行過研究。vue的各類理念也都比較瞭解。最近有空總結下本身對vue各個知識點的理解。vue

生命週期 

vue生命週期示例圖node


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

1. 創生created

 對vue熟悉的人都知道,vue是封裝在vue的函數中的,angularjs

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 **github

2. 掛載mount

 數據初始結束後,若是能夠找到el則開始掛載DOM元素。算法

 開始編譯:此時判斷是否有render函數,若是有就不作處理直接執行mount.call(this, el, hydrating)。若是沒有render函數,則獲取template,template能夠是#id、模板字符串、dom元素,若是沒有template,則獲取el以及其子內容做爲模板,而後開始編譯模板,編譯完成調用render函數生成DOM元素。如今咱們能夠看到頁面顯示的內容了。 bash

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) dom

4. 結束destroy

任何事物有始必有終,vue固然也不例外。在vue中destroy用來結束他的生命週期,當離開當前組件時會自動觸發destroy,固然咱們也能夠手動觸發。  函數

手動銷燬vue須要注意:destroy會徹底銷燬一個實例。清理它與其它實例的鏈接,解綁它的所有指令及事件監聽器。也就是說他不會刪除頁面的DOM元素。

相關文章
相關標籤/搜索