Vue源码分析（二）

2018-04-09

在Vue源码分析一中，我们分析了Vue的构造函数初始化。现在我们针对细节进行分析，了解Vue的实际运行方案。首先最基础的，就是生命周期。

init

上一章中提过instance模块包含了Vue构造函数的实例方法、生命周期管理和事件等。instacnce模块的index.js代码也有简单分析。vue实例化后除了为Vue的prototype挂载一系列属性方法，还运行了方法：this._init(options)。该方法在init.js文件的initMixin函数中定义。代码如下：

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++
    // a flag to avoid this being observed
    vm._isVue = true
    // 合并options属性:如果传入的option是一个组件，执行initInternalComponent, 否则执行mergeOptions;
    if (options && options._isComponent) {
      // 内部使用Vnode部分使用
      // 以Vue.options为原型创建vm.$options, 并把options中的属性复制到vm.$options;
      initInternalComponent(vm, options)
    } else {
      // mergeOptions函数的参数：[parent, child, vm]，实现options的合并功能，不同于Object.assign的简单合并，它还对数据还进行了一系列的操作：
      // 1、格式化props、injects和directives
      // 2、递归调用mergeOptions, 并把mixins的内容递归处理到parent对象中
      // 3、mergeField所有的parent和child属性。
      //      key值为生命周期或者watch时，同名钩子函数将混合为一个数组，因此都将被调用。另外，混合对象的钩子将在组件自身钩子之前调用.
      //      当为prosp/methods/inject/computed/components/directives/filters时，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    
    // expose real self
    vm._self = vm
    //生命周期方法初始化
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    // 调用生命周期钩子的方法，此时是beforeCreate阶段
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    // 生命周期进入created阶段
    callHook(vm, 'created')
    // 如果有el属性，将内容挂载到el中去。
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

可以看到，在_init(options)方法调用后，会运行options的处理方法，然后就是初始化生命周期、事件、render等等。生命周期方法的源码可见lifecycle.js文件，还有一个非常值得关注的就是callHook函数。不过callHook和initLifecycle两个方法都是在lifecycle.js文件中的。所以下面看lifecycle.js。

lifecycle

首先上图，这是官方提供的Vue生命周期流程图：

beforeCreate 和 created

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

前面init模块代码里看到，在实例化vue时，callHook了beforeCreate和created，的确如上图的流程所示。最后判断vm.$options.el是否存在，存在则调用vm.$mount(vm.$options.el)方法。

vm.$mount()

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

如果没有提供 elementOrSelector参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。

这个方法返回实例自身，因而可以链式调用其它实例方法。

vm.$mount()方法不是core文件夹内的代码，你会发现在plateforms模块和entry-runtime-with-compiler模块中能找到它：

//entry-runtime-with-compiler中的vm.$mount()方法：
//保存platforms模块的$mount
const mount = Vue.prototype.$mount
//重写覆盖$mount方法
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  //query内部判断了一下el是不是字符串，不是的话就直接返回，所以我们的el也可以直接传入dom元素。
  el = el && query(el)
  
  if (el === document.body || el === document.documentElement) {
    return this
  }
  const options = this.$options
  // 判断是否有render函数，如果有就不做处理直接执行mount.call(this, el, hydrating)。如果没有render函数，则获取template，template可以是#id、模板字符串、dom元素，如果没有template，则获取el以及其子内容作为模板。
  if (!options.render) {
    // 获取template
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        return this
      }
    } else if (el) {
      template = getOuterHTML(el)
    }
    // 编译template，对我们最后生成的模板进行解析，生成render
    if (template) {
      const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns
    }
  }
  // 执行 $mount 方法
  return mount.call(this, el, hydrating)
}

然后我们看mount.call(this, el, hydrating)方法代码：

// src/platforms/web/runtime/index.js
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

该方法使用了lifecycle中的mountComponent方法：

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode
    
  }
  callHook(vm, 'beforeMount')
  let updateComponent
  
  updateComponent = () => {
    //render函数返回的是一个VNode对象(虚拟dom对象)
    vm._update(vm._render(), hydrating)
  }
  new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */)
  hydrating = false
  
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

现在callHook(vm, ‘beforeMount’)和callHook(vm, ‘mounted’)都出现了~

beforeMount 和 mounted

beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。

mounted：el被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

由代码可知，在callHook(vm, ‘beforeMount’)后，定义了updateComponent函数，对vm实例做了watcher的观察者绑定。然后就是设置_isMounted为true，并告诉mounted了。什么？这个中间不是应该进行mount相关操作吗？？？这里非常关键的方法就是 _update() 和 Watcher了。 _update()在生命周期的update阶段会被用到。我们先看Watcher方法：

constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: Object
  ) {
    this.vm = vm
    vm._watchers.push(this)
    if (options) {
      this.deep = !!options.deep
      this.user = !!options.user
      this.lazy = !!options.lazy
      this.sync = !!options.sync
    } else {
      this.deep = this.user = this.lazy = this.sync = false
    }
    ...
    this.expression = process.env.NODE_ENV !== 'production'
      ? expOrFn.toString()
      : ''
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = function () {}
        process.env.NODE_ENV !== 'production' && warn(
          `Failed watching path: "${expOrFn}" ` +
          'Watcher only accepts simple dot-delimited paths. ' +
          'For full control, use a function instead.',
          vm
        )
      }
    }
    this.value = this.lazy
      ? undefined
      : this.get()
  }
  get () {
    pushTarget(this)
    let value
    const vm = this.vm
    if (this.user) {
      try {
        value = this.getter.call(vm, vm)
      } catch (e) {
        handleError(e, vm, `getter for watcher "${this.expression}"`)
      }
    } else {
      value = this.getter.call(vm, vm)
    }
    if (this.deep) {
      traverse(value)
    }
    popTarget()
    this.cleanupDeps()
    return value
  }

可见updateComponent函数被当做expOrFn参数传入Watcher中后，被value = this.getter.call(vm, vm)触发了。所以，触发了vm._update(vm._render(), hydrating)方法。这里完成beforeMount和mounted中间的渲染过程。但是官方所说的create vm.$el and replace el with it不符合，vm.$el = el方法是在beforeMount前执行的。

beforeUpdate 和 updated

beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

上面提到的vm._update(vm._render(), hydrating)方法中，vm._render()会根据数据生成一个vdom, vm.update()则会对比新的vdom和当前vdom，并把差异的部分渲染到真正的dom树上，在vm.render()执行过程中，这个watcher会作为依赖被添加到vm的data中去，如果data发生变化，就会通知这个watcher重新执行vm._update(vm._render(), hydrating)。所以，beforeUpdate和updated需要在_update方法中查看：

// 在lifecycle文件的lifecycleMixin模块内部提供了Vue.prototype._update、Vue.prototype.$forceUpdate和Vue.prototype.$destroy方法
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    if (vm._isMounted) {
      callHook(vm, 'beforeUpdate')
    }
    const prevEl = vm.$el
    const prevVnode = vm._vnode
    const prevActiveInstance = activeInstance
    activeInstance = vm
    vm._vnode = vnode
    
    if (!prevVnode) {
      // initial render
      vm.$el = vm.__patch__(
        vm.$el, vnode, hydrating, false /* removeOnly */,
        vm.$options._parentElm,
        vm.$options._refElm
      )
     
      vm.$options._parentElm = vm.$options._refElm = null
    } else {
      // updates
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    activeInstance = prevActiveInstance
    // update __vue__ reference
    if (prevEl) {
      prevEl.__vue__ = null
    }
    if (vm.$el) {
      vm.$el.__vue__ = vm
    }
    // if parent is an HOC, update its $el as well
    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
      vm.$parent.$el = vm.$el
    }
  }

执行callHook(vm, ‘beforeUpdate’)后在vm.__patch__方法中实现组件的update方法：包括真实dom的创建、虚拟dom的diff修改、dom的销毁等。这个在这章不讨论。那updated在哪里被触发呢？在scheduler 的 callUpdateHooks 方法，该方法遍历了 watcher 数组。

// src/core/observer/scheduler.js
function callUpdatedHooks (queue) {
  let i = queue.length
  while (i--) {
    const watcher = queue[i]
    const vm = watcher.vm
    if (vm._watcher === watcher && vm._isMounted) {
      callHook(vm, 'updated')
    }
  }
}

这个 callUpdatedHooks 在 flushSchedulerQueue 方法中调用。

/**
 * 刷新队列并运行watcher
 */
function flushSchedulerQueue () {
  flushing = true
  let watcher, id
  queue.sort((a, b) => a.id - b.id)
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index]
    id = watcher.id
    has[id] = null
    watcher.run()
  }
  const activatedQueue = activatedChildren.slice()
  const updatedQueue = queue.slice()
  resetSchedulerState()
  // 调用组件的updated和activated生命周期
  callActivatedHooks(activatedQueue)
  callUpdatedHooks(updatedQueue)
}

继续找下去

export function queueWatcher (watcher: Watcher) {
  const id = watcher.id
  if (has[id] == null) {
    has[id] = true // 此参数用于判断watcher的ID是否存在
    ……
    if (!waiting) {
      waiting = true
      nextTick(flushSchedulerQueue)
    }
  }
}

最终在 watcher.js 找到 update 方法：

// src/core/observer/watcher.js
update () {
  // lazy 懒加载
  // sync 组件数据双向改变
  if (this.lazy) {
    this.dirty = true
  } else if (this.sync) {
    this.run()
  } else {
    queueWatcher(this) // 排队watcher
  }
}

等于是队列执行完 Watcher 数组的 update 方法后调用了 updated 钩子函数。

beforeDestroy 和 destroyed

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

前面说到在lifecycle文件的lifecycleMixin模块内部提供了Vue.prototype._update、Vue.prototype.$forceUpdate和Vue.prototype.$destroy方法。下面看destroy方法：

Vue.prototype.$destroy = function () {
    const vm: Component = this
    if (vm._isBeingDestroyed) {
      return
    }
    callHook(vm, 'beforeDestroy')
    vm._isBeingDestroyed = true
    // remove self from parent
    const parent = vm.$parent
    if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
      remove(parent.$children, vm)
    }
    // teardown watchers
    if (vm._watcher) {
      vm._watcher.teardown()
    }
    let i = vm._watchers.length
    while (i--) {
      vm._watchers[i].teardown()
    }
    // remove reference from data ob
    // frozen object may not have observer.
    if (vm._data.__ob__) {
      vm._data.__ob__.vmCount--
    }
    // call the last hook...
    vm._isDestroyed = true
    // invoke destroy hooks on current rendered tree
    vm.__patch__(vm._vnode, null)
    // fire destroyed hook
    callHook(vm, 'destroyed')
    // turn off all instance listeners.
    vm.$off()
    // remove __vue__ reference
    if (vm.$el) {
      vm.$el.__vue__ = null
    }
    // release circular reference (#6759)
    if (vm.$vnode) {
      vm.$vnode.parent = null
    }
  }
}

这是一个销毁 Vue 实例的过程，将各种配置清空和移除。beforeDestroy和destroyed的钩子都在这里被触发。

好了，现在按照Vue官网的流程图走了一遍生命周期，希望对大家有用~