Vue源码探究-类初始化函数详情

import config from '../config'
import { initProxy } from './proxy'
import { initState } from './state'
import { initRender } from './render'
import { initEvents } from './events'
import { mark, measure } from '../util/perf'
import { initLifecycle, callHook } from './lifecycle'
import { initProvide, initInjections } from './inject'
import { extend, mergeOptions, formatComponentName } from '../util/index'

/**
 * Mix properties into target object.
 */
export function extend (to: Object, _from: ?Object): Object {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}

// 该函数用于将两个配置对象合并为一个新的配置对象，
// 核心实体既用于实例化也用于继承
/**
 * Merge two option objects into a new one.
 * Core utility used in both instantiation and inheritance.
 */
// 导出mergeOptions函数
// 接收Object类型的parent、child参数，Component类型的vm参数
// 函数返回对象
export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  // 非生产环境时检查child对象的components属性中是否有不合适的引用组件名称
  // 不合适的组建名主要是指与Vue内建html标签或保留标签名相同的组件名称如slot,component
  // 有兴趣了解的可以参照同一文件中的L246到L269查看具体实现
  // 其中的辅助工具函数位于src/shared/util.js的L94到L112
  if (process.env.NODE_ENV !== 'production') {
    checkComponents(child)
  }

  // 如果child传入的是函数对象，则将函数的options属性赋值给child，确保child引用options
  if (typeof child === 'function') {
    child = child.options
  }

  // 下面三个函数都是将child的各个属性格式化成预定好的对象格式
  // 标准化属性
  normalizeProps(child, vm)
  // 标准化注入
  normalizeInject(child, vm)
  // 标准化指令
  normalizeDirectives(child)
  // 定义扩展
  const extendsFrom = child.extends
  // 如果存在则向下递归合并
  if (extendsFrom) {
    parent = mergeOptions(parent, extendsFrom, vm)
  }
  // 如果存在mixins，则合并每一个mixin对象
  if (child.mixins) {
    for (let i = 0, l = child.mixins.length; i < l; i++) {
      parent = mergeOptions(parent, child.mixins[i], vm)
    }
  }
  // 定义以空对象options
  const options = {}
  let key
  // 对每一个parent中的属性进行合并，添加到options中
  for (key in parent) {
    mergeField(key)
  }
  // 如果parent中不含有key属性，则对每一个child中key属性进行合并
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key)
    }
  }
  // 定义mergeField函数，接收key参数
  function mergeField (key) {
    // 如果strats[key]有定义好的合并策略函数，则复制给strat
    // 否则将默认的defaultStrat方法赋给strat
    const strat = strats[key] || defaultStrat
    // 合并属性
    options[key] = strat(parent[key], child[key], vm, key)
  }
  // 返回最终options对象
  return options
}

/**
 * Option overwriting strategies are functions that handle
 * how to merge a parent option value and a child option
 * value into the final value.
 */
const strats = config.optionMergeStrategies

/**
 * Options with restrictions
 */
if (process.env.NODE_ENV !== 'production') {
  strats.el = strats.propsData = function (parent, child, vm, key) {
    if (!vm) {
      warn(
        `option "${key}" can only be used during instance ` +
        'creation with the `new` keyword.'
      )
    }
    return defaultStrat(parent, child)
  }
}

 // 输出initInternalComponent函数
 // 接受Component类型的vm参数和InternalComponentOptions类型的options参数
 // 这里vm和options分别是创建实例时将要传入的实例对象和配置对象
 export function initInternalComponent (vm: Component, options: InternalComponentOptions) {
  // 定义opts，为opts和vm.$options创建以vm.constructor.options为原型的对象
  const opts = vm.$options = Object.create(vm.constructor.options)
  // 以下为手动赋值，目的为了提升性能，因为比通过动态枚举属性来赋值的过程快
  // doing this because it's faster than dynamic enumeration.
  // 定义父虚拟节点parentVnode并赋值
  const parentVnode = options._parentVnode
  // 设置opts对象parent和_parentVnode属性
  opts.parent = options.parent
  opts._parentVnode = parentVnode

  // 定义vnodeComponentOptions并赋值
  const vnodeComponentOptions = parentVnode.componentOptions
  // 定义opts各属性
  opts.propsData = vnodeComponentOptions.propsData
  opts._parentListeners = vnodeComponentOptions.listeners
  opts._renderChildren = vnodeComponentOptions.children
  opts._componentTag = vnodeComponentOptions.tag

  // options.render属性存在，则设置opts的render和staticRenderFns属性
  if (options.render) {
    opts.render = options.render
    opts.staticRenderFns = options.staticRenderFns
  }
}

vm.$options = mergeOptions(
  resolveConstructorOptions(vm.constructor),
  options || {},
  vm
)

// 导出resolveConstructorOptions函数，接受Component构造函数Ctor参数
export function resolveConstructorOptions (Ctor: Class<Component>) {
  // 定义传入的构造函数的options属性
  let options = Ctor.options
  // 如果Ctor.super存在则执行下面代码，这里是用来判断实例对象是否有继承
  // 如果有的话递归的把继承的父级对象的options都拿出来合并
  if (Ctor.super) {
    const superOptions = resolveConstructorOptions(Ctor.super)
    const cachedSuperOptions = Ctor.superOptions
    if (superOptions !== cachedSuperOptions) {
      // 如果父级的option变化了则要更新
      // super option changed,
      // need to resolve new options.
      Ctor.superOptions = superOptions
      // 检查是否有任何后期修改/附加选项，这是为了解决之前误删注入选项的问题
      // check if there are any late-modified/attached options (#4976)
      const modifiedOptions = resolveModifiedOptions(Ctor)
      // 如果返回有修改的选项，则扩展Ctor.extendOptions
      // update base extend options
      if (modifiedOptions) {
        extend(Ctor.extendOptions, modifiedOptions)
      }
      // 合并继承选项和扩展选项
      options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions)
      // 设置options.components[options.name]的引用
      if (options.name) {
        options.components[options.name] = Ctor
      }
    }
  }
  // 返回options
  return options
}

// 以下两个函数是为了解决#4976问题的方案
// 定义resolveModifiedOptions函数，接受Ctor参数，返回Object
function resolveModifiedOptions (Ctor: Class<Component>): ?Object {
  // 定义modified变量储存最终要选择保留的属性
  let modified
  // 分别定义最新、扩展和密封的配置选项
  const latest = Ctor.options
  const extended = Ctor.extendOptions
  const sealed = Ctor.sealedOptions
  // 遍历传入的配置选项对象
  for (const key in latest) {
    // 如果最新的属性与密封的属性不相等，则执行去重处理
    if (latest[key] !== sealed[key]) {
      if (!modified) modified = {}
      modified[key] = dedupe(latest[key], extended[key], sealed[key])
    }
  }
  // 返回modified
  return modified
}

// 定义dedupe函数，接收latest最新对象，extended扩展对象，sealed密封对象
function dedupe (latest, extended, sealed) {
  // 合并选项的时候比较最新和密封的属性，确保生命周期钩子不重复
  // compare latest and sealed to ensure lifecycle hooks won't be duplicated
  // between merges
  // 如果latest是数组
  if (Array.isArray(latest)) {
    // 定义res变量
    const res = []
    // 格式化sealed和extended为数组对象
    sealed = Array.isArray(sealed) ? sealed : [sealed]
    extended = Array.isArray(extended) ? extended : [extended]
    for (let i = 0; i < latest.length; i++) {
      // 返回扩展的选项中存在的最新对象的属性而非密封选项以排除重复选项
      // push original options and not sealed options to exclude duplicated options
      if (extended.indexOf(latest[i]) >= 0 || sealed.indexOf(latest[i]) < 0) {
        res.push(latest[i])
      }
    }
    // 返回包含了扩展选项的数组变量
    return res
  } else {
    // 否则直接返回latest
    return latest
  }
}