Vue源碼學習--從new Vue 到呈現頁面

時間 2019-12-07

標籤 vue 源碼學習 new 呈現頁面简体版

原文原文鏈接

這篇文章在於總結前段時間對於Vue源碼的粗略學習，大體講述一個簡單的vue實例從建立到更新再到銷燬的過程。涉及Vue從html結構到ast對象；再從render函數到virtual dom；以及vue的核心Observer + dep + Watcher對象所構成的數據驅動視圖更新的邏輯；以及最後更新頁面所涉及的diff算法等等。Vue博大精深，小子由衷敬畏和仰慕。能力有限，各方面均是我的膚淺認知。記錄一些我的學習理解心得，有不當的地方請指正。html

生命週期圖註釋

Vue的Observer + dep + watcher

###Observer Observer在建立的時候，給傳入的對象進行封裝，返回一個包含value,dep(from new Dep()),__ob__等屬性的Ob實例。Ob對象對傳入的value進行深層次的改造，給value以及屬性中是對象或者數組的項進行改造，使他們能夠被觀測。對象執行defineReactive（下文解析）；數組改寫部分原型方法，使他們能夠被觀測。vue

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that have this object as root $data

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    // 定義不可枚舉的屬性__ob__
    def(value, '__ob__', this) // 給data添加__ob__屬性，返回observer對象
    // root value是個對象，這個if針對屬性值
    if (Array.isArray(value)) {
      // 原型鏈綁定到改造後的一些方法，是對象操做可被觀測
      if (hasProto) {
        protoAugment(value, arrayMethods)
      } else {
        copyAugment(value, arrayMethods, arrayKeys)
      }
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }

  /**
   * Walk through all properties and convert them into
   * getter/setters. This method should only be called when
   * value type is Object.
   */
  walk (obj: Object) { 
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }

  /**
   * Observe a list of Array items.
   */
  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}
複製代碼

經過Object.defineProperty在被觀測對象的讀取和寫入過程當中執行一些操做，用來觸發視圖更新。關鍵步驟有三點：node

給每個被觀測的屬性或者對象利用閉包建立一個Dep對象供get或者set函數使用。
存在觀測對象的前提下（vm的render，update過程，以及compute，watch過程等等，在讀取屬性值的時候，執行dep.depend(大體做用就是將當前target的watcher對象存入dep.subs);
存在觀測對象的前提下,在寫入屬性值的時候，執行dep.notify(),這個方法的大體做用是在被觀測對象發生變化時，取出保存在dep.subs裏面的watcher對象，執行這些對象的update方法，去更新依賴。這個地方存在一個我的以爲很優秀的設計，是視圖的更新是調用nextTick函數而且隊列更新視圖。傳送門--Vue異步更新隊列大體做用是異步隊列更新視圖，達到性能以及效率上的提高。

defineReactive

/**
 * Define a reactive property on an Object.
 */
export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }

  let childOb = !shallow && observe(val) // 做爲props的子對象再也不ob, observe 返回ob對象
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify() // 通知更新this.subs.update
    }
  })
}
複製代碼

Dep

Dep對象做爲Obverser對象與Watcher對象的中介者，起到關聯兩個對象，統一把控變化的做用。react

在被觀測屬性被讀取的時候，且是須要被觀測的（被觀測對象的操做，後文如無特殊說明，都在這個前提下,首先檢測當前的watcher對象是否在已經在當前dep對象的subs裏面，不在則添加。
notify，是在寫入觀測者對象以後，觸發視圖更新的操做。
Dep.target,全部dep對象公用一個target。保證同一時間只有一個目標對象在被計算。

export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = []
  }

  addSub (sub: Watcher) {
    this.subs.push(sub) // Watcher
  }

  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }

  depend () {
    if (Dep.target) {
      // target 爲Watcher對象
      Dep.target.addDep(this) // this當前觀測者持有的dep對象
    }
  }

  notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    if (process.env.NODE_ENV !== 'production' && !config.async) {
      // subs aren't sorted in scheduler if not running async // we need to sort them now to make sure they fire in correct // order subs.sort((a, b) => a.id - b.id) } for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() // watcher.update } } } // The current target watcher being evaluated. // This is globally unique because only one watcher // can be evaluated at a time. Dep.target = null const targetStack = [] export function pushTarget (target: ?Watcher) { targetStack.push(target) Dep.target = target } export function popTarget () { targetStack.pop() Dep.target = targetStack[targetStack.length - 1] } 複製代碼

Wathcer

addDep函數：addDep的做用是，保證在向dep對象添加wathcer的時候，一個depid在一輪觀測中只被添加一次。這個管控過程，在watcher裏面使用set對象維護。 update函數：用來隊列觸發視圖更新算法

/**
 * A watcher parses an expression, collects dependencies,
 * and fires callback when the expression value changes.
 * This is used for both the $watch() api and directives.
 */
export default class Watcher {
    // 代碼過長，只展文中提到的部分
    addDep (dep: Dep) {
    const id = dep.id
    if (!this.newDepIds.has(id)) {
      this.newDepIds.add(id)
      this.newDeps.push(dep)
      if (!this.depIds.has(id)) {
        dep.addSub(this) // this = > Watcher
      }
    }
  }
   /**
   * Subscriber interface.
   * Will be called when a dependency changes.
   */
  update () {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }
}
複製代碼

patch過程解析（diff）

patchVnode

Vue經過數據變化驅動視圖更新，更新的本質是每次設置被觀測數據的值時，調用watcher.update方法，進行局部更新express

使options.render生成一份新的vnode（新的vnode沒有對應的dom引用，是原始的數組結構）
經過vm對象獲取當前的vnode數組，做爲oldVnode，與vnode一塊兒執行函數
patchVnode(oldVnode, vnode, insertedVnodeQueue /** [] */, null, null, removeOnly);

patchVnode函數用來比較新舊vnode。大體過程以下api

修改被觀測屬性的值，觸發dep.notify => watcher.update => vm._update => patchVnode
對新舊vnode進行比較，逐步更新屬性，事件等等
若是存在子節點，使用diff算法深度優先遍歷子節點。這個過程當中，若是存在props相關觀測屬性的讀取，就會將對應的component的watcher對象push到quene隊列中，等待當前的watcher更新完，再執行更新。這個過程是在patchVnode函數中，遇到component的子節點時，執行prePatch方法後添加的。

function patchVnode (
    oldVnode,
    vnode,
    insertedVnodeQueue,
    ownerArray,
    index,
    removeOnly
  ) {
    if (oldVnode === vnode) {
      return
    }

    if (isDef(vnode.elm) && isDef(ownerArray)) {
      // clone reused vnode
      vnode = ownerArray[index] = cloneVNode(vnode)
    }

    const elm = vnode.elm = oldVnode.elm

    if (isTrue(oldVnode.isAsyncPlaceholder)) {
      if (isDef(vnode.asyncFactory.resolved)) {
        hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
      } else {
        vnode.isAsyncPlaceholder = true
      }
      return
    }

    // reuse element for static trees.
    // note we only do this if the vnode is cloned -
    // if the new node is not cloned it means the render functions have been
    // reset by the hot-reload-api and we need to do a proper re-render.
    if (isTrue(vnode.isStatic) &&
      isTrue(oldVnode.isStatic) &&
      vnode.key === oldVnode.key &&
      (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
    ) {
      vnode.componentInstance = oldVnode.componentInstance
      return
    }

    let i
    const data = vnode.data
    if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
      i(oldVnode, vnode)
    }

    const oldCh = oldVnode.children
    const ch = vnode.children
    if (isDef(data) && isPatchable(vnode)) {
      for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
      if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
    }
    if (isUndef(vnode.text)) {
      if (isDef(oldCh) && isDef(ch)) {
        if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
      } else if (isDef(ch)) {
        if (process.env.NODE_ENV !== 'production') {
          checkDuplicateKeys(ch)
        }
        if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
        addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
      } else if (isDef(oldCh)) {
        removeVnodes(elm, oldCh, 0, oldCh.length - 1)
      } else if (isDef(oldVnode.text)) {
        nodeOps.setTextContent(elm, '')
      }
    } else if (oldVnode.text !== vnode.text) {
      nodeOps.setTextContent(elm, vnode.text)
    }
    if (isDef(data)) {
      if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
    }
  }
複製代碼

updateChildren

比較過程：oldCh，newCh數組

元素爲空
oldCh[start]與newCh[start]是同一個元素，比較更新，移動到下一組元素比對
不然，比較oldCh[end]與newCh[end]，相同則比對更新，移動到前一對繼續比較
3.不然，比較oldCh[start]與newCh[end],相同則比較更新，並將oldCh[start]移動到最右邊
不然，比較oldCh[end]與newCh[start],相同則比較更新，並將oldCh[end]移動到最左邊
若是以上條件都不成立，則進行key值索引操做，首先給lodch創建key值map對象索引；再根據新的vnode是否有key值進行索引查找，有key值則查找map，結果會返回index或者undefined；沒有key值則須要進行節點比對，找出是否存在同樣節點；若是匹配到相同的節點，則進行比較更新，並移動到對應的位置。若是沒有，則建立一個新的節點並插入對應的位置。
最後，將多的老節點刪除，或者將多的新節點插入到尾部。
以上，就是大體的邏輯。

其中，有三點須要注意的地方就是：bash

創建key值，能夠最大限度的複用節點並加快索引（有key值會優先匹配key值相同的節點）
vue會給靜態節點創建特殊的key值，以達到提高更新效率的目的。
diff中的sameVnode方法，是一個弱比較，好比。兩個div，內部元素不一樣，在某種狀況下，也會認爲是相同的vnode，好比以下的狀況：

<div id="test">
		<div v-if="show">
			<div class="a">
				<a :href="url"></a>
				<h1>靜態文本</h1>
			</div>
			<div class='b'>
				這是一個文本節點{{url}}
			</div>
		</div>
		<div v-else>
			<div class='b'>
				這是一個文本節點{{url}}
			</div>
			<div class="a">
				<a :href="url"></a>
				<h1>靜態文本</h1>
			</div>
		</div>
	</div>
複製代碼

在diff過程當中，會將第一個的a,和第二個的b視爲相同的vnode，並進行比較。最後差很少整個替換了一遍。能夠看出，這樣的效率並不高，咱們但願的是，a與a比較，b與b比較。這種狀況，咱們能夠人爲的添加key值，去優化diff過程。閉包

// diff過程
  function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    let oldStartIdx = 0
    let newStartIdx = 0
    let oldEndIdx = oldCh.length - 1
    let oldStartVnode = oldCh[0]
    let oldEndVnode = oldCh[oldEndIdx]
    let newEndIdx = newCh.length - 1
    let newStartVnode = newCh[0]
    let newEndVnode = newCh[newEndIdx]
    let oldKeyToIdx, idxInOld, vnodeToMove, refElm

    // removeOnly is a special flag used only by <transition-group>
    // to ensure removed elements stay in correct relative positions
    // during leaving transitions
    const canMove = !removeOnly

    if (process.env.NODE_ENV !== 'production') {
      checkDuplicateKeys(newCh)
    }

    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
      if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
      } else if (isUndef(oldEndVnode)) {
        oldEndVnode = oldCh[--oldEndIdx]
      } else if (sameVnode(oldStartVnode, newStartVnode)) {
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
        oldStartVnode = oldCh[++oldStartIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      } else {
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        if (isUndef(idxInOld)) { // New element
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
          vnodeToMove = oldCh[idxInOld]
          if (sameVnode(vnodeToMove, newStartVnode)) {
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
            oldCh[idxInOld] = undefined
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } else {
            // same key but different element. treat as new element
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }
        newStartVnode = newCh[++newStartIdx]
      }
    }
    if (oldStartIdx > oldEndIdx) {
      refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
      addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
    } else if (newStartIdx > newEndIdx) {
      removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
    }
  }
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。