fix(Loading): 处理v-loading指令和useLoading的内存泄露

vbenjs · May 21, 2024 · b2b19b6 · b2b19b6
1 parent 144cdd4
commit b2b19b6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/src/components/Loading/src/createLoading.ts b/src/components/Loading/src/createLoading.ts
@@ -19,13 +19,14 @@ export function createLoading(props?: Partial<LoadingProps>, target?: HTMLElemen
 
   vm = createVNode(LoadingWrap);
 
+  let container: Nullable<HTMLElement> = null;
   if (wait) {
     // TODO fix https://github.com/anncwb/vue-vben-admin/issues/438
     setTimeout(() => {
-      render(vm, document.createElement('div'));
+      container && render(vm, (container = document.createElement('div')));
     }, 0);
   } else {
-    render(vm, document.createElement('div'));
+    render(vm, (container = document.createElement('div')));
   }
 
   function close() {
@@ -41,13 +42,19 @@ export function createLoading(props?: Partial<LoadingProps>, target?: HTMLElemen
     target.appendChild(vm.el as HTMLElement);
   }
 
+  function destory() {
+    container && render(null, container);
+    container = vm = null;
+  }
+
   if (target) {
     open(target);
   }
   return {
     vm,
     close,
     open,
+    destory,
     setTip: (tip: string) => {
       data.tip = tip;
     },

diff --git a/src/components/Loading/src/useLoading.ts b/src/components/Loading/src/useLoading.ts
@@ -1,7 +1,8 @@
 import { unref } from 'vue';
+import type { Ref } from 'vue';
+import { tryOnUnmounted } from '@vueuse/core';
 import { createLoading } from './createLoading';
 import type { LoadingProps } from './typing';
-import type { Ref } from 'vue';
 
 export interface UseLoadingOptions {
   target?: any;
@@ -45,5 +46,9 @@ export function useLoading(
     instance.setTip(tip);
   };
 
+  tryOnUnmounted(() => {
+    instance.destory();
+  });
+
   return [open, close, setTip];
 }
diff --git a/src/directives/loading.ts b/src/directives/loading.ts
@@ -28,7 +28,7 @@ const loadingDirective: Directive = {
     }
   },
   unmounted(el) {
-    el?.instance?.close();
+    el?.instance?.destory();
   },
 };