refactor: adjust warning for fn props and component with many props

diff --git a/packages/runtime-core/src/warning.ts b/packages/runtime-core/src/warning.ts
index 7f0ff080b59a2cd3a403cf063d35c3a7ae865fd8..a79c5d3fe6b365d508234da8fcb9e7ace0c9519e 100644 (file)
--- a/packages/runtime-core/src/warning.ts
+++ b/packages/runtime-core/src/warning.ts
@@ -131,8 +131,12 @@ function formatComponentName(vnode: ComponentVNode, file?: string): string {
 
 function formatProps(props: Data): any[] {
   const res: any[] = []
-  for (const key in props) {
+  const keys = Object.keys(props)
+  keys.slice(0, 3).forEach(key => {
     res.push(...formatProp(key, props[key]))
+  })
+  if (keys.length > 3) {
+    res.push(` ...`)
   }
   return res
 }
@@ -143,11 +147,17 @@ function formatProp(key: string, value: unknown, raw?: boolean): any {
   if (isString(value)) {
     value = JSON.stringify(value)
     return raw ? value : [`${key}=${value}`]
-  } else if (typeof value === 'number' || value == null) {
+  } else if (
+    typeof value === 'number' ||
+    typeof value === 'boolean' ||
+    value == null
+  ) {
     return raw ? value : [`${key}=${value}`]
   } else if (isRef(value)) {
     value = formatProp(key, toRaw(value.value), true)
     return raw ? value : [`${key}=Ref<`, value, `>`]
+  } else if (isFunction(value)) {
+    return [`${key}=fn${value.name ? `<${value.name}>` : ``}`]
   } else {
     value = toRaw(value)
     return raw ? value : [`${key}=`, value]