perf: portal

components/_util/Portal.js

@@ -1,48 +1,38 @@
 import PropTypes from './vue-types';
-import { defineComponent, nextTick, Teleport } from 'vue';
+import {
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  Teleport,
+} from 'vue';
 
 export default defineComponent({
   name: 'Portal',
   props: {
     getContainer: PropTypes.func.isRequired,
-    children: PropTypes.any.isRequired,
     didUpdate: PropTypes.func,
   },
-  data() {
-    this._container = null;
-    return {};
-  },
-  mounted() {
-    this.createContainer();
-  },
-  updated() {
-    const { didUpdate } = this.$props;
-    if (didUpdate) {
-      nextTick(() => {
-        didUpdate(this.$props);
+  setup(props, { slots }) {
+    const container = ref();
+
+    onMounted(() => {
+      container.value = props.getContainer();
     });
-    }
-  },
-
-  beforeUnmount() {
-    this.removeContainer();
-  },
-  methods: {
-    createContainer() {
-      this._container = this.$props.getContainer();
-      this.$forceUpdate();
-    },
-    removeContainer() {
-      if (this._container && this._container.parentNode) {
-        this._container.parentNode.removeChild(this._container);
-      }
-    },
-  },
-
-  render() {
-    if (this._container) {
-      return <Teleport to={this._container}>{this.$props.children}</Teleport>;
-    }
-    return null;
+    onUpdated(() => {
+      nextTick(() => {
+        props.didUpdate?.(props);
+      });
+    });
+    onBeforeUnmount(() => {
+      container.value &&
+        container.value.parentNode &&
+        container.value.parentNode.removeChild(container.value);
+    });
+    return () => {
+      return container.value ? <Teleport to={container.value}>{slots.default?.()}</Teleport> : null;
+    };
   },
 });

components/_util/PortalWrapper.js

@@ -141,8 +141,8 @@ export default defineComponent({
       portal = (
         <Portal
           getContainer={this.getDomContainer}
-          children={children(childProps)}
           ref={this.savePortal}
+          v-slots={{ default: () => children(childProps) }}
         ></Portal>
       );
     }

components/vc-dialog/DialogWrap.jsx

@@ -35,9 +35,11 @@ const DialogWrap = defineComponent({
         visible={visible}
         forceRender={forceRender}
         getContainer={getContainer}
-        children={childProps => {
+        v-slots={{
+          default: childProps => {
             dialogProps = { ...dialogProps, ...childProps };
             return <Dialog {...dialogProps}>{getSlot(this)}</Dialog>;
+          },
         }}
       />
     );

components/vc-select/OptionList.tsx

@@ -147,22 +147,20 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
     watch(
       () => props.open,
       () => {
+        nextTick(() => {
           if (!props.multiple && props.open && props.values.size === 1) {
             const value = Array.from(props.values)[0];
             const index = memoFlattenOptions.value.findIndex(({ data }) => data.value === value);
             setActive(index);
-          nextTick(() => {
             scrollIntoView(index);
-          });
           }
           // Force trigger scrollbar visible when open
           if (props.open) {
-          nextTick(() => {
             listRef.current?.scrollTo(undefined);
-          });
           }
+        });
       },
-      { immediate: true, flush: 'post' },
+      { immediate: true },
     );
 
     // ========================== Values ==========================

components/vc-select/SelectTrigger.tsx

@@ -131,6 +131,7 @@ const SelectTrigger = defineComponent<SelectTriggerProps, { popupRef: any }>({
           [`${dropdownPrefixCls}-empty`]: empty,
         })}
         popupStyle={popupStyle}
+        // destroyPopupOnHide
         // getTriggerDOMNode={getTriggerDOMNode}
       >
         {getSlot(this)[0]}

components/vc-trigger/Trigger.jsx

@@ -648,7 +648,7 @@ export default defineComponent({
       portal = (
         <Portal
           key="portal"
-          children={this.getComponent()}
+          v-slots={{ default: this.getComponent }}
           getContainer={this.getContainer}
           didUpdate={this.handlePortalUpdate}
         ></Portal>

v2-doc

@@ -1 +1 @@
-Subproject commit 2924233b60d3645d3df5e86e8bec912d3a13496d
+Subproject commit 6b53258cc2b3709e070d340714e992760e660e67