From d9e9879465aae128acbd7c00ba34f053ab0207ac Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Tue, 25 Aug 2020 08:26:18 +0800
Subject: [PATCH] feat: add use-lazy-render

---
 src/api/use-lazy-render.ts | 13 +++++++++++++
 src/collapse-item/index.js |  6 +++---
 2 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 src/api/use-lazy-render.ts

diff --git a/src/api/use-lazy-render.ts b/src/api/use-lazy-render.ts
new file mode 100644
index 000000000..054d25fbb
--- /dev/null
+++ b/src/api/use-lazy-render.ts
@@ -0,0 +1,13 @@
+import { ref, Ref, watch } from 'vue';
+
+export function useLazyRender(show: Ref<boolean>) {
+  const inited = ref(show.value);
+
+  watch(show, (value) => {
+    if (value) {
+      inited.value = value;
+    }
+  });
+
+  return inited;
+}
diff --git a/src/collapse-item/index.js b/src/collapse-item/index.js
index 025a27429..201609be4 100644
--- a/src/collapse-item/index.js
+++ b/src/collapse-item/index.js
@@ -6,6 +6,7 @@ import { raf, doubleRaf } from '../utils/dom/raf';
 
 // Composition
 import { useParent } from '../api/use-relation';
+import { useLazyRender } from '../api/use-lazy-render';
 
 // Components
 import Cell from '../cell';
@@ -42,7 +43,7 @@ export default createComponent({
     });
 
     const show = ref(expanded.value);
-    const inited = ref(expanded.value);
+    const shouldRender = useLazyRender(show);
 
     const onTransitionEnd = () => {
       if (!expanded.value) {
@@ -59,7 +60,6 @@ export default createComponent({
 
       if (value) {
         show.value = true;
-        inited.value = true;
       }
 
       // Use raf: flick when opened in safari
@@ -118,7 +118,7 @@ export default createComponent({
     };
 
     const renderContent = () => {
-      if (inited.value) {
+      if (shouldRender.value) {
         return (
           <div
             ref={wrapper}