Vue mergeProps用法详细讲解

很多人不知道megreProps的用法，今天我们就来讲解下mergeProps的用法以及原理

用法

大家觉得下面哪种用法是正确的呢？

这样

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

或者这样

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

还是这样

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

你使用的话会使用上面哪一种呢？

不知道

因为写的是jsx语法，所以查看了vue3的jsx语法，发现里面并没有关于这个解释，只说到了默认开启

于是去vue3官网查找，找到

megreProps：Merge multiple props objects with special handling for certain props.

意思就说合并多个道具对象，对某些道具进行特殊处理

所以前面两种写法是错误的

接着看了下mergeProps源码的写法

// ...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
}

所以你传入的对象里面是需要有style、class等key的

接下来看看normalizeClass这个方法，这个方法就是将用户写的多种格式（比如数组，对象，字符串）的class进行序列化成字符串给到最终渲染的元素

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()
}

再看看normalizeStyle这个函数

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
  }
}

parseStringStyle函数就是将字符串对;进行分割，然后设置对应的key，value

元素上的style只能使用string，所以在最终挂在到dom元素上需要进行stringifyStyle

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
}

所以通过简单的对vue3的mergeProps的代码进行简单分析就能知道其原理了，使用上也会更加的熟练

原文地址：https://blog.csdn.net/cyg_l02/article/details/127076533