Vue源码探究-生命周期

// 导出initLifecycle函数，接受一个Component类型的vm参数
export function initLifecycle (vm: Component) {
  // 获取实例的$options属性，赋值为options变量
  const options = vm.$options

 // 找到最上层非抽象父级
  // locate first non-abstract parent
  // 首先找到第一个父级
  let parent = options.parent
  // 判断是否存在且非抽象
  if (parent && !options.abstract) {
    // 遍历寻找最外层的非抽象父级
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    // 将实例添加到最外层非抽象父级的子组件中
    parent.$children.push(vm)
  }

  // 初始化实例的公共属性
  // 设置父级属性，如果之前的代码未找到父级，则vm.$parent为undefined
  vm.$parent = parent
  // 设置根属性，没有父级则为实例对象自身
  vm.$root = parent ? parent.$root : vm

  // 初始化$children和$refs属性
  // vm.$children是子组件的数组集合
  // vm.$refs是指定引用名称的组件对象集合
  vm.$children = []
  vm.$refs = {}

  // 初始化一些私有属性
  // 初始化watcher
  vm._watcher = null
  // _inactive和_directInactive是判断激活状态的属性
  vm._inactive = null
  vm._directInactive = false
  // 生命周期相关的私有属性
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}

// 导出lifecycleMixin函数，接收形参Vue，
// 使用Flow进行静态类型检查指定为Component类
export function lifecycleMixin (Vue: Class<Component>) {
  // 为Vue原型对象挂载_update私有方法
  // 接收vnode虚拟节点类型参数和一个可选的布尔值hydrating
  Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    // 定义实例变量
    const vm: Component = this

    // 下面三条赋值操作主要是为了存储属性
    // 实例的$el属性赋值给prevEl变量，这是新传入的实例挂载元素
    const prevEl = vm.$el
    // 实例的_vnode属性赋值给prevVnode变量，储存的旧虚拟节点
    const prevVnode = vm._vnode
    // 将activeInstance赋值给prevActiveInstance变量，激活实例
    // activeInstance初始为null
    const prevActiveInstance = activeInstance

    // 下面是针对新属性的赋值
    // 将新实例设置为activeInstance
    activeInstance = vm
    // 将传入的vnode赋值给实例的_vnode属性
    // vnode是新生成的虚拟节点数，这里把它储存起来覆盖
    vm._vnode = vnode
    // 下面使用到的Vue.prototype .__ patch__方法是在运行时里注入的
    // 根据运行平台的不同定义
    // Vue.prototype.__patch__ is injected in entry points
    // based on the rendering backend used.
    // 如果prevVnode属性不存在说明是新创建实例
    // 执行实例属性$el的初始化渲染，否则更新节点
    if (!prevVnode) {
      // 如果旧的虚拟节点不存在则调用patch方法
      // 传入挂载的真实DOM节点和新生成的虚拟节点
      // initial render
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
      // 否则执行虚拟节点更新操作，传入的是新旧虚拟节点
      // updates
      vm.$el = vm.__patch__(prevVnode, vnode)
    }

    // 将之前的激活实例又赋值给activeInstance
    activeInstance = prevActiveInstance
    // 更新__vue__属性的引用
    // update __vue__ reference
    // 如果存在旧元素则设置它的__vue__引用为null
    if (prevEl) {
      prevEl.__vue__ = null
    }
    // 如果实例的$el属性存在，设置它的__vue__引用为该实例
    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
    }
    // 更新的钩子由调度器调用，以确保在父更新的钩子中更新子项。
    // updated hook is called by the scheduler to ensure that children are
    // updated in a parent's updated hook.
  }

  // 为Vue实例挂载$forceUpdate方法，实现强制更新
  Vue.prototype.$forceUpdate = function () {
    const vm: Component = this
    if (vm._watcher) {
      vm._watcher.update()
    }
  }

  // 为Vue实例挂载$destroy方法
  Vue.prototype.$destroy = function () {
    // 定义实例变量
    const vm: Component = this
    // 如果实例已经在销毁中，则返回
    if (vm._isBeingDestroyed) {
      return
    }
    // 调用beforeDestroy钩子
    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
    }
  }
}