Vue源码学习--从new Vue 到呈现页面-白红宇

这篇文章在于总结前段时间对于Vue源码的粗略学习，大致讲述一个简单的vue实例从创建到更新再到销毁的过程。涉及Vue从html结构到ast对象；再从render函数到virtual dom；以及vue的核心Observer + dep + Watcher对象所构成的数据驱动视图更新的逻辑；以及最后更新页面所涉及的diff算法等等。Vue博大精深，小子由衷敬畏和仰慕。能力有限，各方面均是个人肤浅认知。记录一些个人学习理解心得，有不当的地方请指正。

生命周期图注释

Vue的Observer + dep + watcher

###Observer Observer在创建的时候，给传入的对象进行封装，返回一个包含value,dep(from new Dep()),__ob__等属性的Ob实例。Ob对象对传入的value进行深层次的改造，给value以及属性中是对象或者数组的项进行改造，使他们可以被观测。对象执行defineReactive（下文解析）；数组改写部分原型方法，使他们可以被观测。

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
    
     ) {    for (let i = 0, l = items.length; i < l; i++) {      observe(items[i])    }  }}复制代码

通过Object.defineProperty在被观测对象的读取和写入过程中执行一些操作，用来触发视图更新。关键步骤有三点：

给每一个被观测的属性或者对象利用闭包创建一个Dep对象供get或者set函数使用。

存在观测对象的前提下（vm的render，update过程，以及compute，watch过程等等，在读取属性值的时候，执行dep.depend(大致作用就是将当前target的watcher对象存入dep.subs);

存在观测对象的前提下,在写入属性值的时候，执行dep.notify(),这个方法的大致作用是在被观测对象发生变化时，取出保存在dep.subs里面的watcher对象，执行这些对象的update方法，去更新依赖。这个地方存在一个个人觉得很优秀的设计，是视图的更新是调用nextTick函数并且队列更新视图。大致作用是异步队列更新视图，达到性能以及效率上的提升。

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对象的中介者，起到关联两个对象，统一把控变化的作用。

在被观测属性被读取的时候，且是需要被观测的（被观测对象的操作，后文如无特殊说明，都在这个前提下,首先检测当前的watcher对象是否在已经在当前dep对象的subs里面，不在则添加。

notify，是在写入观测者对象之后，触发视图更新的操作。

Dep.target,所有dep对象公用一个target。保证同一时间只有一个目标对象在被计算。

export default class Dep {  static target: ?Watcher;  id: number;  subs: Array
    
     ;  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 = nullconst 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方法，进行局部更新

使options.render生成一份新的vnode（新的vnode没有对应的dom引用，是原始的数组结构）

通过vm对象获取当前的vnode数组，作为oldVnode，与vnode一起执行函数
patchVnode(oldVnode, vnode, insertedVnodeQueue /** [] */, null, null, removeOnly);

patchVnode函数用来比较新旧vnode。大致过程如下

修改被观测属性的值，触发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值则需要进行节点比对，找出是否存在一样节点；如果匹配到相同的节点，则进行比较更新，并移动到对应的位置。如果没有，则创建一个新的节点并插入对应的位置。

最后，将多的老节点删除，或者将多的新节点插入到尾部。
以上，就是大致的逻辑。

其中，有三点需要注意的地方就是：

建立key值，可以最大限度的复用节点并加快索引（有key值会优先匹配key值相同的节点）

vue会给静态节点建立特殊的key值，以达到提升更新效率的目的。

diff中的sameVnode方法，是一个弱比较，比如。两个div，内部元素不同，在某种情况下，也会认为是相同的vnode，比如如下的情况：

在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 
    
         // 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)    }  }复制代码