From c3759b1c3fb3c6c02fc7b20340d459ea48b4c62e Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Tue, 28 Sep 2021 21:13:02 +0800
Subject: [PATCH] perf: using appear instead

---
 packages/vant/src/overlay/Overlay.tsx      |  6 +++++-
 packages/vant/src/utils/mount-component.ts | 11 ++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/vant/src/overlay/Overlay.tsx b/packages/vant/src/overlay/Overlay.tsx
index 24f3d2f85..0e3536edc 100644
--- a/packages/vant/src/overlay/Overlay.tsx
+++ b/packages/vant/src/overlay/Overlay.tsx
@@ -54,6 +54,10 @@ export default defineComponent({
       );
     });
 
-    return () => <Transition name="van-fade">{renderOverlay()}</Transition>;
+    return () => (
+      <Transition name="van-fade" appear>
+        {renderOverlay()}
+      </Transition>
+    );
   },
 });
diff --git a/packages/vant/src/utils/mount-component.ts b/packages/vant/src/utils/mount-component.ts
index f0cad1e60..dc8580b8c 100644
--- a/packages/vant/src/utils/mount-component.ts
+++ b/packages/vant/src/utils/mount-component.ts
@@ -1,4 +1,4 @@
-import { createApp, reactive, Component, nextTick } from 'vue';
+import { createApp, reactive, Component } from 'vue';
 import { extend } from '../utils';
 import { useExpose } from '../composables/use-expose';
 
@@ -15,14 +15,11 @@ export function usePopupState() {
   };
 
   const open = (props: Record<string, any>) => {
-    extend(state, props);
-    // for transition
-    nextTick(() => toggle(true));
+    extend(state, props, { transitionAppear: true });
+    toggle(true);
   };
 
-  const close = () => {
-    nextTick(() => toggle(false));
-  };
+  const close = () => toggle(false);
 
   useExpose({ open, close, toggle });