前言

前面我們簡單的了解了 vue 初始化時的一些大概的流程，這里我們詳細的了解下具體的內容;
這塊建議搭建可以根據 demo 進行 debugger 來觀察；

內容

這一塊主要圍繞init.ts中的mergeOptions進行剖析，

mergeOptions

mergeOptions的方法位于scr/core/util/options.ts中；

/**
 * Option overwriting strategies are functions that handle
 * how to merge a parent option value and a child option
 * value into the final value.
 * 選項合并策略 處理合并parent選項值和child選項值并轉為最終的值
 */
const strats = config.optionMergeStrategies

/**
 * Options with restrictions
 *
 */
if (__DEV__) {
  strats.el = strats.propsData = https://www.cnblogs.com/wangyang0210/archive/2023/03/14/function (
    parent: any,
    child: any,
    vm: any,
    key: any
  ) {
    if (!vm) {
      warn(
        `option"${key}" can only be used during instance ` +
          'creation with the `new` keyword.'
      )
    }
    return defaultStrat(parent, child)
  }
}

/**
 * Helper that recursively merges two data objects together.
 *
 * 合并data選項
 *
 */
function mergeData(
  to: Record<string | symbol, any>,
  from: Record<string | symbol, any> | null,
  recursive = true
): Record<PropertyKey, any> {
  if (!from) return to
  let key, toVal, fromVal

  const keys = hasSymbol
    ? (Reflect.ownKeys(from) as string[])
    : Object.keys(from)

  for (let i = 0; i < keys.length; i++) {
    key = keys[i]
    // in case the object is already observed...
    // 跳過已經存在回應式的物件
    if (key === '__ob__') continue
    toVal = to[key]
    fromVal = from[key]
    if (!recursive || !hasOwn(to, key)) {
      // 對資料進行回應式處理
      set(to, key, fromVal)
    } else if (
      toVal !== fromVal &&
      isPlainObject(toVal) &&
      isPlainObject(fromVal)
    ) {
      // 如果parent和child都有值卻不相等而且兩個都是物件的時候,繼續遞回合并
      mergeData(toVal, fromVal)
    }
  }
  return to
}

/**
 * Data
 *
 * 合并作為函式的data
 */
export function mergeDataOrFn(
  parentVal: any,
  childVal: any,
  vm?: Component
): Function | null {
  // 判斷是否存在vue實體
  if (!vm) {
    // in a Vue.extend merge, both should be functions
    // 在Vue.extend的合并中,兩個引數都應該是函式
    if (!childVal) {
      return parentVal
    }
    if (!parentVal) {
      return childVal
    }
    // when parentVal & childVal are both present,
    // 當parentVal和childVal都存在的時候
    // we need to return a function that returns the
    // 我們需要回傳一個函式
    // merged result of both functions... no need to
    // 該函式回傳兩者合并的結果
    // check if parentVal is a function here because
    // 不需要去檢查parentVal是否是一個函式因為
    // it has to be a function to pass previous merges.
    // 他肯定是先前合并的函式
    return function mergedDataFn() {
      // 合并data資料
      return mergeData(
        isFunction(childVal) ? childVal.call(this, this) : childVal,
        isFunction(parentVal) ? parentVal.call(this, this) : parentVal
      )
    }
  } else {
    // 合并實體data函式
    return function mergedInstanceDataFn() {
      // instance merge
      // child 資料
      const instanceData = https://www.cnblogs.com/wangyang0210/archive/2023/03/14/isFunction(childVal)
        ? childVal.call(vm, vm)
        : childVal
      // 默認資料
      const defaultData = isFunction(parentVal)
        ? parentVal.call(vm, vm)
        : parentVal
      // 如果child存在資料則進行合并否則直接回傳默認資料
      if (instanceData) {
        return mergeData(instanceData, defaultData)
      } else {
        return defaultData
      }
    }
  }
}

strats.data = function (
  parentVal: any,
  childVal: any,
  vm?: Component
): Function | null {
  if (!vm) {
    // dev環境下會判斷child是否為函式,不是的話則發出警告并回傳parentVal
    if (childVal && typeof childVal !=='function') {
      __DEV__ &&
        warn(
          'The "data" option should be a function ' +
            'that returns a per-instance value in component ' +
            'definitions.',
          vm
        )
      return parentVal
    }
    return mergeDataOrFn(parentVal, childVal)
  }

  return mergeDataOrFn(parentVal, childVal, vm)
}

/**
 * Hooks and props are merged as arrays.
 *
 * 生命周期合并策略會將生命周期內的鉤子函式和props轉化為陣列格式并合并到一個陣列中
 */
export function mergeLifecycleHook(
  parentVal: Array<Function> | null,
  childVal: Function | Array<Function> | null
): Array<Function> | null {
  const res = childVal
    ? parentVal
      ? parentVal.concat(childVal)
      : isArray(childVal)
      ? childVal
      : [childVal]
    : parentVal
  return res ? dedupeHooks(res) : res
}

function dedupeHooks(hooks: any) {
  const res: Array<any> = []
  for (let i = 0; i < hooks.length; i++) {
    if (res.indexOf(hooks[i]) === -1) {
      res.push(hooks[i])
    }
  }
  return res
}

LIFECYCLE_HOOKS.forEach(hook => {
  strats[hook] = mergeLifecycleHook
})

/**
 * Assets
 *
 * When a vm is present (instance creation), we need to do
 * a three-way merge between constructor options, instance
 * options and parent options.
 * 當存在vm(實體創建)時,我們需要在建構式選項、實體和父選之間進行三方合并
 *
 */
function mergeAssets(
  parentVal: Object | null,
  childVal: Object | null,
  vm: Component | null,
  key: string
): Object {
  const res = Object.create(parentVal || null)
  if (childVal) {
    __DEV__ && assertObjectType(key, childVal, vm)
    // 將child合并到parentVal中會進行覆寫
    return extend(res, childVal)
  } else {
    return res
  }
}

ASSET_TYPES.forEach(function (type) {
  strats[type + 's'] = mergeAssets
})

/**
 * Watchers.
 *
 * Watchers hashes should not overwrite one
 * another, so we merge them as arrays.
 *監聽不應該被覆寫，所以使用陣列格式進行合并
 *
 * watch合并
 */
strats.watch = function (
  parentVal: Record<string, any> | null,
  childVal: Record<string, any> | null,
  vm: Component | null,
  key: string
): Object | null {
  // work around Firefox's Object.prototype.watch...
  // nativeWatch 兼容火狐瀏覽器，因為火狐瀏覽器原型上存在watch
  //@ts-expect-error work around
  if (parentVal === nativeWatch) parentVal = undefined
  //@ts-expect-error work around
  if (childVal === nativeWatch) childVal = undefined
  /* istanbul ignore if */
  if (!childVal) return Object.create(parentVal || null)
  if (__DEV__) {
    assertObjectType(key, childVal, vm)
  }
  if (!parentVal) return childVal
  const ret: Record<string, any> = {}
  extend(ret, parentVal)
  for (const key in childVal) {
    let parent = ret[key]
    const child = childVal[key]
    if (parent && !isArray(parent)) {
      parent = [parent]
    }
    ret[key] = parent ? parent.concat(child) : isArray(child) ? child : [child]
  }
  return ret
}

/**
 * Other object hashes.
 *
 * 物件合并，存在childVal的話以childVal為準
 */
strats.props =
  strats.methods =
  strats.inject =
  strats.computed =
    function (
      parentVal: Object | null,
      childVal: Object | null,
      vm: Component | null,
      key: string
    ): Object | null {
      if (childVal && __DEV__) {
        assertObjectType(key, childVal, vm)
      }
      if (!parentVal) return childVal
      const ret = Object.create(null)
      extend(ret, parentVal)
      if (childVal) extend(ret, childVal)
      return ret
    }

/**
 * provide合并
 */
strats.provide = function (parentVal: Object | null, childVal: Object | null) {
  if (!parentVal) return childVal
  return function () {
    const ret = Object.create(null)
    mergeData(ret, isFunction(parentVal) ? parentVal.call(this) : parentVal)
    if (childVal) {
      // 不進行遞回合并
      mergeData(
        ret,
        isFunction(childVal) ? childVal.call(this) : childVal,
        false // non-recursive
      )
    }
    return ret
  }
}

/**
 * Default strategy.
 * 默認值策略 | 避免parentVal被未定義的childVal覆寫
 */
const defaultStrat = function (parentVal: any, childVal: any): any {
  return childVal === undefined ? parentVal : childVal
}

/**
 * Validate component names
 * 校驗組件名是否合法 | 避免組件名稱使用保留的關鍵字或者不符合html5規范
 */
function checkComponents(options: Record<string, any>) {
  for (const key in options.components) {
    validateComponentName(key)
  }
}

export function validateComponentName(name: string) {
  if (
    !new RegExp(`^[a-zA-Z][\\-\\.0-9_${unicodeRegExp.source}]*$`).test(name)
  ) {
    warn(
      'Invalid component name: "' +
        name +
        '". Component names ' +
        'should conform to valid custom element name in html5 specification.'
    )
  }
  if (isBuiltInTag(name) || config.isReservedTag(name)) {
    warn(
      'Do not use built-in or reserved HTML elements as component ' +
        'id: ' +
        name
    )
  }
}

/**
 * Ensure all props option syntax are normalized into the
 * Object-based format.
 *
 * 格式化object物件 | 確保所有的props選項的語法都符合物件格式
 */
function normalizeProps(options: Record<string, any>, vm?: Component | null) {
  const props = options.props
  // 不存在props則直接return
  if (!props) return
  const res: Record<string, any> = {}
  let i, val, name
  // 判斷是否是陣列
  if (isArray(props)) {
    i = props.length
    while (i--) {
      val = props[i]
      if (typeof val === 'string') {
        // 使用駝峰來代替-連字符
        name = camelize(val)
        res[name] = { type: null }
      } else if (__DEV__) {
        // 如果是dev環境則發出警告，提示在陣列語法下props必須為字串
        warn('props must be strings when using array syntax.')
      }
    }
  } else if (isPlainObject(props)) {
    // 判斷是否為物件
    for (const key in props) {
      val = props[key]
      // 使用駝峰來代替-連字符
      name = camelize(key)
      res[name] = isPlainObject(val) ? val : { type: val }
    }
  } else if (__DEV__) {
    // 如果是dev環境則發出警告，提示props應該是一個陣列或者物件
    warn(
      `Invalid value for option "props": expected an Array or an Object, ` +
        `but got ${toRawType(props)}.`,
      vm
    )
  }
  options.props = res
}

/**
 * Normalize all injections into Object-based format
 *
 * 將所有的inject格式化object物件
 */
function normalizeInject(options: Record<string, any>, vm?: Component | null) {
  const inject = options.inject
  if (!inject) return
  const normalized: Record<string, any> = (options.inject = {})
  if (isArray(inject)) {
    for (let i = 0; i < inject.length; i++) {
      normalized[inject[i]] = { from: inject[i] }
    }
  } else if (isPlainObject(inject)) {
    for (const key in inject) {
      const val = inject[key]
      normalized[key] = isPlainObject(val)
        ? extend({ from: key }, val)
        : { from: val }
    }
  } else if (__DEV__) {
    // 開發環境下如果inject格式不是陣列或者物件則發出警告
    warn(
      `Invalid value for option "inject": expected an Array or an Object, ` +
        `but got ${toRawType(inject)}.`,
      vm
    )
  }
}

/**
 * Normalize raw function directives into object format.
 *
 *將原始的指令函式轉為object物件格式
 */
function normalizeDirectives(options: Record<string, any>) {
  const dirs = options.directives
  if (dirs) {
    for (const key in dirs) {
      const def = dirs[key]
      if (isFunction(def)) {
        dirs[key] = { bind: def, update: def }
      }
    }
  }
}

// 開發環境下，會進行檢測，如果不是物件的話發出警告
function assertObjectType(name: string, value: any, vm: Component | null) {
  if (!isPlainObject(value)) {
    warn(
      `Invalid value for option "${name}": expected an Object, ` +
        `but got ${toRawType(value)}.`,
      vm
    )
  }
}

/**
 * Merge two option objects into a new one.
 * Core utility used in both instantiation and inheritance.
 *
 * 將兩個option物件合并成一個新的物件
 * 用于實體化和繼承的核心工具
 */
export function mergeOptions(
  parent: Record<string, any>,
  child: Record<string, any>,
  vm?: Component | null
): ComponentOptions {
  // dev環境下會檢查組件名稱是否合法
  if (__DEV__) {
    checkComponents(child)
  }

  // 檢查option是否是函式,是的話直接將options賦值給child
  if (isFunction(child)) {
    // @ts-expect-error
    child = child.options
  }

  // 格式化props為object物件 | 檢測格式是否為陣列和物件，并使用駝峰代替-連字符，開發環境下如果格式存在問題會發出警告
  normalizeProps(child, vm)
  // 格式化inject為object物件 | 檢測格式是否為陣列和物件，開發環境下如果格式存在問題會發出警告
  normalizeInject(child, vm)
  // 格式化directive為object物件
  normalizeDirectives(child)

  // Apply extends and mixins on the child options,
  // 在子選項上去應用 extends和mixins
  // but only if it is a raw options object that isn't
  // the result of another mergeOptions call.
  // 前提是它是一個原始選項物件,而不是另一個mergeOptions的結果
  // Only merged options has the _base property.
  // 只合并具有_base屬性的合并選項
  if (!child._base) {
    // 合并extends到parent
    if (child.extends) {
      parent = mergeOptions(parent, child.extends, vm)
    }
    // 合并mixins到parent
    if (child.mixins) {
      for (let i = 0, l = child.mixins.length; i < l; i++) {
        parent = mergeOptions(parent, child.mixins[i], vm)
      }
    }
  }

  const options: ComponentOptions = {} as any
  let key
  for (key in parent) {
    mergeField(key)
  }
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key)
    }
  }
  // 合并parent和child選項
  function mergeField(key: any) {
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
  }
  return options
}

/**
 * Resolve an asset.
 * 決議資源
 * This function is used because child instances need access
 * to assets defined in its ancestor chain.
 * 使用這個函式是因為子實體中需要訪問其祖先中定義的資源
 */
export function resolveAsset(
  options: Record<string, any>,
  type: string,
  id: string,
  warnMissing?: boolean
): any {
  /* istanbul ignore if */
  if (typeof id !== 'string') {
    return
  }
  const assets = options[type]
  // check local registration variations first
  if (hasOwn(assets, id)) return assets[id]
  const camelizedId = camelize(id)
  if (hasOwn(assets, camelizedId)) return assets[camelizedId]
  const PascalCaseId = capitalize(camelizedId)
  if (hasOwn(assets, PascalCaseId)) return assets[PascalCaseId]
  // fallback to prototype chain
  const res = assets[id] || assets[camelizedId] || assets[PascalCaseId]
  if (__DEV__ && warnMissing && !res) {
    warn('Failed to resolve ' + type.slice(0, -1) + ': ' + id)
  }
  return res
}

標籤：其他

上一篇：webgl 系列 —— 漸變三角形

下一篇：股票問題-求收益最大值