Vue mergeProps用法详细讲解

style: mergeProps({
    width: this.itemWidth
}, xProps.style)

style: mergeProps({
    style: {
        width: this.itemWidth
    },
    ...(xProps?.style ?? {})
})

style: mergeProps(
    {
      style: { width: this.itemWidth },
    },
    xProps,
).style

// ...args将多个对象收集成数组
export function mergeProps(...args: (Data & VNodeProps)[]) {
  //　最终合并的结果
  const ret: Data = {}
  //　遍历用户传入的多个对象
  for (let i = 0; i < args.length; i++) {
    // 取到传入的对象值
    const toMerge = args[i]
    for (const key in toMerge) {
       //　对class进行序列化合并处理
      if (key === 'class') {
        if (ret.class !== toMerge.class) {
          ret.class = normalizeClass([ret.class, toMerge.class])
        }
      //　对style进行序列化合并处理
      } else if (key === 'style') {
        ret.style = normalizeStyle([ret.style, toMerge.style])
      //　对其他的绑定的属性进行合并
      } else if (isOn(key)) {
        const existing = ret[key]
        const incoming = toMerge[key]
        if (
          incoming &&
          existing !== incoming &&
          !(isArray(existing) && existing.includes(incoming))
        ) {
          ret[key] = existing
            ? [].concat(existing as any, incoming as any)
            : incoming
        }
      // 如果是普通元素上的用户自定义属性，则直接赋值
      } else if (key !== '') {
        ret[key] = toMerge[key]
      }
    }
  }
  return ret
}

export function normalizeClass(value: unknown): string {
  let res = ''
  // 如果是字符串，直接返回
  if (isString(value)) {
    res = value
  // 如果是数组
  } else if (isArray(value)) {
    for (let i = 0; i < value.length; i++) {
      // 递归调用进行处理
      const normalized = normalizeClass(value[i])
      if (normalized) {
        res += normalized + ' '
      }
    }
  // 如果是对象, 如{ active: isActive, 'text-danger': hasError }，需要把key拼接
  } else if (isObject(value)) {
    for (const name in value) {
      if (value[name]) {
        res += name + ' '
      }
    }
  }
  return res.trim()
}

export type NormalizedStyle = Record<string, string | number>
export function normalizeStyle(
  value: unknown
): NormalizedStyle | string | undefined {
  // 如果是数组的情况
  if (isArray(value)) {
    const res: NormalizedStyle = {}
    for (let i = 0; i < value.length; i++) {
      const item = value[i]
      const normalized = isString(item)
        ? parseStringStyle(item)
        : (normalizeStyle(item) as NormalizedStyle)
      if (normalized) {
        //　将序列化后的style保存到ret上
        for (const key in normalized) {
          res[key] = normalized[key]
        }
      }
    }
    return res
  } else if (isString(value)) {
    return value
  } else if (isObject(value)) {
    return value
  }
}

export function stringifyStyle(
  styles: NormalizedStyle | string | undefined
): string {
  let ret = ''
  if (!styles || isString(styles)) {
    return ret
  }
  for (const key in styles) {
    const value = styles[key]
    const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key)
    if (
      isString(value) ||
      (typeof value === 'number' && isNoUnitNumericStyleProp(normalizedKey))
    ) {
      // only render valid values
      ret += `${normalizedKey}:${value};`
    }
  }
  return ret
}