From 44acf6139da68c63ce5658383c87c72b72beaf7a Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sun, 15 Aug 2021 09:46:32 +0800
Subject: [PATCH] perf: portal

---
 components/_util/Portal.js          | 60 ++++++++++++-----------------
 components/_util/PortalWrapper.js   |  5 +--
 components/vc-dialog/DialogWrap.jsx |  8 ++--
 components/vc-trigger/Trigger.tsx   |  2 +-
 4 files changed, 33 insertions(+), 42 deletions(-)

diff --git a/components/_util/Portal.js b/components/_util/Portal.js
index e0ca32114..782b3cf9e 100644
--- a/components/_util/Portal.js
+++ b/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',
+  inheritAttrs: false,
   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) {
+  setup(props, { slots }) {
+    const container = ref();
+    onMounted(() => {
+      container.value = props.getContainer();
+    });
+    onUpdated(() => {
       nextTick(() => {
-        didUpdate(this.$props);
+        props.nextTick?.(props);
       });
-    }
-  },
-
-  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);
+    });
+    onBeforeUnmount(() => {
+      if (container.value && container.value.parentNode) {
+        container.value.parentNode.removeChild(container.value);
       }
-    },
-  },
-
-  render() {
-    if (this._container) {
-      return <Teleport to={this._container}>{this.$props.children}</Teleport>;
-    }
-    return null;
+    });
+    return () => {
+      return container.value ? <Teleport to={container.value}>{slots.default?.()}</Teleport> : null;
+    };
   },
 });
diff --git a/components/_util/PortalWrapper.js b/components/_util/PortalWrapper.js
index 38113023f..7cf359071 100644
--- a/components/_util/PortalWrapper.js
+++ b/components/_util/PortalWrapper.js
@@ -20,7 +20,6 @@ export default defineComponent({
     wrapperClassName: PropTypes.string,
     forceRender: PropTypes.looseBool,
     getContainer: PropTypes.any,
-    children: PropTypes.func,
     visible: PropTypes.looseBool,
   },
   data() {
@@ -130,7 +129,7 @@ export default defineComponent({
   },
 
   render() {
-    const { children, forceRender, visible } = this.$props;
+    const { forceRender, visible } = this.$props;
     let portal = null;
     const childProps = {
       getOpenCount: () => openCount,
@@ -141,8 +140,8 @@ export default defineComponent({
       portal = (
         <Portal
           getContainer={this.getDomContainer}
-          children={children(childProps)}
           ref={this.savePortal}
+          v-slots={{ default: () => this.$slots.default?.(childProps) }}
         ></Portal>
       );
     }
diff --git a/components/vc-dialog/DialogWrap.jsx b/components/vc-dialog/DialogWrap.jsx
index ef9a2b313..6dfe9d2fc 100644
--- a/components/vc-dialog/DialogWrap.jsx
+++ b/components/vc-dialog/DialogWrap.jsx
@@ -35,9 +35,11 @@ const DialogWrap = defineComponent({
         visible={visible}
         forceRender={forceRender}
         getContainer={getContainer}
-        children={childProps => {
-          dialogProps = { ...dialogProps, ...childProps };
-          return <Dialog {...dialogProps}>{getSlot(this)}</Dialog>;
+        v-slots={{
+          default: childProps => {
+            dialogProps = { ...dialogProps, ...childProps };
+            return <Dialog {...dialogProps}>{getSlot(this)}</Dialog>;
+          },
         }}
       />
     );
diff --git a/components/vc-trigger/Trigger.tsx b/components/vc-trigger/Trigger.tsx
index 770aac44a..4d332df6f 100644
--- a/components/vc-trigger/Trigger.tsx
+++ b/components/vc-trigger/Trigger.tsx
@@ -717,7 +717,7 @@ export default defineComponent({
       portal = (
         <Portal
           key="portal"
-          children={this.getComponent()}
+          v-slots={{ default: this.getComponent }}
           getContainer={this.getContainer}
           didUpdate={this.handlePortalUpdate}
         ></Portal>