feat(vue): improve performance of mapProps (#2909)

alibaba · Mar 7, 2022 · 5ca0456 · 5ca0456
1 parent 83ab672
commit 5ca0456
Showing 1 changed file with 58 additions and 44 deletions.
diff --git a/packages/vue/src/shared/connect.ts b/packages/vue/src/shared/connect.ts
@@ -1,4 +1,4 @@
-import { isVue2, markRaw, defineComponent } from 'vue-demi'
+import { isVue2, markRaw, defineComponent, getCurrentInstance } from 'vue-demi'
 import { isFn, isStr, FormPath, each } from '@formily/shared'
 import { isVoidField, GeneralField } from '@formily/core'
 import { observer } from '@formily/reactive-vue'
@@ -16,54 +16,68 @@ import type {
 export function mapProps<T extends VueComponent = VueComponent>(
   ...args: IStateMapper<VueComponentProps<T>>[]
 ) {
+  const transform = (input: VueComponentProps<T>, field: GeneralField) =>
+    args.reduce((props, mapper) => {
+      if (isFn(mapper)) {
+        props = Object.assign(props, mapper(props, field))
+      } else {
+        each(mapper, (to, extract) => {
+          const extractValue = FormPath.getIn(field, extract)
+          const targetValue = isStr(to) ? to : extract
+          if (extract === 'value') {
+            if (to !== extract) {
+              delete props['value']
+            }
+          }
+          FormPath.setIn(props, targetValue, extractValue)
+        })
+      }
+      return props
+    }, input)
+
   return (target: T) => {
-    return observer(
-      defineComponent<VueComponentProps<T>>({
+    /* istanbul ignore else */
+    if (isVue2) {
+      return defineComponent<VueComponentProps<T>>({
+        functional: true,
         name: target.name ? `Connected${target.name}` : `ConnectedComponent`,
-        // listeners is needed for vue2
-        setup(props, { attrs, slots, listeners }: Record<string, any>) {
+        render(createElement, context) {
           const fieldRef = useField()
-
-          const transform = (
-            input: VueComponentProps<T>,
-            field: GeneralField
-          ) =>
-            args.reduce((props, mapper) => {
-              if (isFn(mapper)) {
-                props = Object.assign(props, mapper(props, field))
-              } else {
-                each(mapper, (to, extract) => {
-                  const extractValue = FormPath.getIn(field, extract)
-                  const targetValue = isStr(to) ? to : extract
-                  if (extract === 'value') {
-                    if (to !== extract) {
-                      delete props['value']
-                    }
-                  }
-                  FormPath.setIn(props, targetValue, extractValue)
-                })
-              }
-              return props
-            }, input)
-
-          return () => {
-            const newAttrs = fieldRef.value
-              ? transform({ ...attrs } as VueComponentProps<T>, fieldRef.value)
-              : { ...attrs }
-            return h(
-              target,
-              {
-                attrs: {
-                  ...newAttrs,
-                },
-                on: listeners,
-              },
-              slots
-            )
-          }
+          const { data } = context
+          const attrs = fieldRef.value
+            ? transform(
+                { ...data.attrs, ...data.props } as VueComponentProps<T>,
+                fieldRef.value
+              )
+            : { ...data.attrs, ...data.props }
+          return createElement(target, { ...data, attrs }, context.children)
         },
       })
-    )
+    } else {
+      return observer(
+        defineComponent({
+          name: target.name ? `Connected${target.name}` : `ConnectedComponent`,
+          setup(props, { attrs, slots }) {
+            const fieldRef = useField()
+            return () => {
+              const newAttrs = fieldRef.value
+                ? transform(
+                    { ...attrs } as VueComponentProps<T>,
+                    fieldRef.value
+                  )
+                : { ...attrs }
+              return h(
+                target,
+                {
+                  attrs: newAttrs,
+                },
+                slots
+              )
+            }
+          },
+        })
+      )
+    }
   }
 }