From b72e487b589601f3a26d27fca6e6f6b1885e3622 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 15 Dec 2023 16:20:50 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BD=BF=E7=94=A8on-before-unmount?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2on-unmouted?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design/src/Select.vue                         |  8 +++++---
 packages/editor/src/components/CodeBlockEditor.vue     |  4 ++--
 packages/editor/src/components/ContentMenu.vue         | 10 +++++-----
 packages/editor/src/components/ScrollBar.vue           |  4 ++--
 packages/editor/src/components/ScrollViewer.vue        |  4 ++--
 packages/editor/src/components/SplitView.vue           |  4 ++--
 packages/editor/src/hooks/use-getso.ts                 |  4 ++--
 packages/editor/src/initService.ts                     |  6 +++---
 packages/editor/src/layouts/CodeEditor.vue             |  4 ++--
 packages/editor/src/layouts/PropsPanel.vue             |  4 ++--
 .../src/layouts/workspace/PageBarScrollContainer.vue   |  4 ++--
 .../src/layouts/workspace/viewer/NodeListMenu.vue      |  4 ++--
 packages/editor/src/layouts/workspace/viewer/Stage.vue |  4 ++--
 packages/form/src/fields/Select.vue                    |  8 +++++---
 packages/ui-vue2/src/useApp.ts                         |  4 ++--
 packages/ui/src/useApp.ts                              |  4 ++--
 16 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/packages/design/src/Select.vue b/packages/design/src/Select.vue
index f77e60cb8..1f246d005 100644
--- a/packages/design/src/Select.vue
+++ b/packages/design/src/Select.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 
 import { getConfig } from './config';
 import type { SelectProps } from './types';
@@ -49,14 +49,16 @@ const visibleHandler = (...args: any[]) => {
 
 const scrollbarWrap = ref<HTMLDivElement | undefined>();
 
-const unWacth = watch(
+const unWatch = watch(
   () => select.value?.scrollbar?.wrap$ || select.value?.scrollbar?.wrapRef,
   (wrap) => {
     if (!wrap) {
       return;
     }
+
+    nextTick(() => unWatch());
+
     scrollbarWrap.value = wrap;
-    unWacth();
   },
   {
     immediate: true,
diff --git a/packages/editor/src/components/CodeBlockEditor.vue b/packages/editor/src/components/CodeBlockEditor.vue
index 14bb10b35..74bdfb24a 100644
--- a/packages/editor/src/components/CodeBlockEditor.vue
+++ b/packages/editor/src/components/CodeBlockEditor.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onUnmounted, ref } from 'vue';
+import { computed, inject, onBeforeUnmount, ref } from 'vue';
 
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
 import { ColumnConfig, FormConfig, FormState, MFormBox, MFormDrawer } from '@tmagic/form';
@@ -85,7 +85,7 @@ const windowReizehandler = () => {
 
 globalThis.addEventListener('resize', windowReizehandler);
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   globalThis.removeEventListener('resize', windowReizehandler);
 });
 
diff --git a/packages/editor/src/components/ContentMenu.vue b/packages/editor/src/components/ContentMenu.vue
index f2be3f094..4c797156e 100644
--- a/packages/editor/src/components/ContentMenu.vue
+++ b/packages/editor/src/components/ContentMenu.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
 
 import { MenuButton, MenuComponent } from '@editor/type';
 
@@ -99,7 +99,7 @@ const clickHandler = () => {
   hide();
 };
 
-const outsideClickhideHandler = (e: MouseEvent) => {
+const outsideClickHideHandler = (e: MouseEvent) => {
   if (!props.autoHide) return;
 
   const target = e.target as HTMLElement | undefined;
@@ -173,13 +173,13 @@ const mouseenterHandler = () => {
 onMounted(() => {
   if (props.isSubMenu) return;
 
-  globalThis.addEventListener('mousedown', outsideClickhideHandler, true);
+  globalThis.addEventListener('mousedown', outsideClickHideHandler, true);
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   if (props.isSubMenu) return;
 
-  globalThis.removeEventListener('mousedown', outsideClickhideHandler, true);
+  globalThis.removeEventListener('mousedown', outsideClickHideHandler, true);
 });
 
 defineExpose({
diff --git a/packages/editor/src/components/ScrollBar.vue b/packages/editor/src/components/ScrollBar.vue
index 567b3b9e9..3a934fca4 100644
--- a/packages/editor/src/components/ScrollBar.vue
+++ b/packages/editor/src/components/ScrollBar.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import Gesto from 'gesto';
 
 defineOptions({
@@ -53,7 +53,7 @@ onMounted(() => {
   bar.value?.addEventListener('wheel', wheelHandler, false);
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   if (gesto) gesto.off();
   bar.value?.removeEventListener('wheel', wheelHandler, false);
 });
diff --git a/packages/editor/src/components/ScrollViewer.vue b/packages/editor/src/components/ScrollViewer.vue
index f946c4c2e..d4583e0fe 100644
--- a/packages/editor/src/components/ScrollViewer.vue
+++ b/packages/editor/src/components/ScrollViewer.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { isNumber } from '@tmagic/utils';
 
@@ -94,7 +94,7 @@ onMounted(() => {
   });
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   scrollViewer.destroy();
 });
 
diff --git a/packages/editor/src/components/SplitView.vue b/packages/editor/src/components/SplitView.vue
index 97989c313..ccb2c7480 100644
--- a/packages/editor/src/components/SplitView.vue
+++ b/packages/editor/src/components/SplitView.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { OnDrag } from 'gesto';
 
 import Resizer from './Resizer.vue';
@@ -110,7 +110,7 @@ onMounted(() => {
   }
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   resizerObserver.disconnect();
 });
 
diff --git a/packages/editor/src/hooks/use-getso.ts b/packages/editor/src/hooks/use-getso.ts
index 5c9825a1f..e71bb5e99 100644
--- a/packages/editor/src/hooks/use-getso.ts
+++ b/packages/editor/src/hooks/use-getso.ts
@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted, type Ref, ref } from 'vue';
+import { onBeforeUnmount, onMounted, type Ref, ref } from 'vue';
 import Gesto, { type OnDrag } from 'gesto';
 
 export const useGetSo = (target: Ref<HTMLElement | undefined>, emit: (evt: 'change', e: OnDrag<Gesto>) => void) => {
@@ -24,7 +24,7 @@ export const useGetSo = (target: Ref<HTMLElement | undefined>, emit: (evt: 'chan
       });
   });
 
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     getso?.unset();
     isDraging.value = false;
   });
diff --git a/packages/editor/src/initService.ts b/packages/editor/src/initService.ts
index bb4308dfe..ba7fe69ef 100644
--- a/packages/editor/src/initService.ts
+++ b/packages/editor/src/initService.ts
@@ -1,4 +1,4 @@
-import { onUnmounted, reactive, toRaw, watch } from 'vue';
+import { onBeforeUnmount, reactive, toRaw, watch } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
@@ -165,7 +165,7 @@ export const initServiceState = (
     },
   );
 
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     editorService.resetState();
     historyService.resetState();
     propsService.resetState();
@@ -405,7 +405,7 @@ export const initServiceEvents = (
     depService.addTarget(createRelatedCompTarget(props.collectorOptions));
   }
 
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     depService.off('add-target', targetAddHandler);
     depService.off('remove-target', targetRemoveHandler);
     depService.off('dep-update', depUpdateHandler);
diff --git a/packages/editor/src/layouts/CodeEditor.vue b/packages/editor/src/layouts/CodeEditor.vue
index 2e1fca824..f7c23d55f 100644
--- a/packages/editor/src/layouts/CodeEditor.vue
+++ b/packages/editor/src/layouts/CodeEditor.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
@@ -188,7 +188,7 @@ onMounted(async () => {
   init();
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   resizeObserver.disconnect();
 });
 
diff --git a/packages/editor/src/layouts/PropsPanel.vue b/packages/editor/src/layouts/PropsPanel.vue
index 597928f30..6e9c153a9 100644
--- a/packages/editor/src/layouts/PropsPanel.vue
+++ b/packages/editor/src/layouts/PropsPanel.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue';
+import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
 import type { FormState, FormValue } from '@tmagic/form';
@@ -64,7 +64,7 @@ onMounted(() => {
   emit('mounted', internalInstance);
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   services?.propsService.off('props-configs-change', init);
 });
 
diff --git a/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue b/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
index 831c6e1fd..903e6dd14 100644
--- a/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
+++ b/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
@@ -72,7 +72,7 @@ onMounted(() => {
   pageBar.value && resizeObserver.observe(pageBar.value);
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   resizeObserver.disconnect();
 });
 
diff --git a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue b/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
index 44c86dec3..7f20041b9 100644
--- a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
+++ b/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
@@ -56,6 +56,8 @@ const unWatch = watch(
   (stage) => {
     if (!stage) return;
 
+    nextTick(() => unWatch());
+
     stage.on('select', (el: HTMLElement, event: MouseEvent) => {
       const els = stage.renderer.getElementsFromPoint(event) || [];
       const ids = els.map((el) => el.id).filter((id) => Boolean(id));
@@ -64,8 +66,6 @@ const unWatch = watch(
 
       filterTextChangeHandler(ids);
     });
-
-    unWatch();
   },
   {
     immediate: true,
diff --git a/packages/editor/src/layouts/workspace/viewer/Stage.vue b/packages/editor/src/layouts/workspace/viewer/Stage.vue
index 2ee2c0438..6ef38dc08 100644
--- a/packages/editor/src/layouts/workspace/viewer/Stage.vue
+++ b/packages/editor/src/layouts/workspace/viewer/Stage.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
+import { computed, inject, markRaw, nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MContainer } from '@tmagic/schema';
@@ -140,7 +140,7 @@ onMounted(() => {
   }
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   stage?.destroy();
   resizeObserver.disconnect();
   services?.editorService.set('stage', null);
diff --git a/packages/form/src/fields/Select.vue b/packages/form/src/fields/Select.vue
index a9fe9b87c..e8fe532db 100644
--- a/packages/form/src/fields/Select.vue
+++ b/packages/form/src/fields/Select.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, onBeforeMount, Ref, ref, watch, watchEffect } from 'vue';
+import { inject, nextTick, onBeforeMount, Ref, ref, watch, watchEffect } from 'vue';
 
 import { TMagicSelect } from '@tmagic/design';
 import { getValueByKeyPath } from '@tmagic/utils';
@@ -331,12 +331,15 @@ if (typeof props.config.options === 'function') {
 }
 
 if (props.config.remote) {
-  const unWacth = watch(
+  const unWatch = watch(
     () => tMagicSelect.value?.scrollbarWrap,
     (scrollbarWrap) => {
       if (!scrollbarWrap) {
         return;
       }
+
+      nextTick(() => unWatch());
+
       scrollbarWrap.addEventListener('scroll', async (e: Event) => {
         const el = e.currentTarget as HTMLDivElement;
         if (moreLoadingVisible.value) {
@@ -353,7 +356,6 @@ if (props.config.remote) {
         options.value = await getOptions();
         moreLoadingVisible.value = false;
       });
-      unWacth();
     },
     {
       immediate: true,
diff --git a/packages/ui-vue2/src/useApp.ts b/packages/ui-vue2/src/useApp.ts
index 8b47eda5d..b4dde0254 100644
--- a/packages/ui-vue2/src/useApp.ts
+++ b/packages/ui-vue2/src/useApp.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { getCurrentInstance, inject, onMounted, onUnmounted } from 'vue';
+import { getCurrentInstance, inject, onBeforeUnmount, onMounted } from 'vue';
 
 import Core from '@tmagic/core';
 
@@ -32,7 +32,7 @@ export default (props: any) => {
     node?.emit('mounted', vm);
   });
 
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     node?.emit('destroy', vm);
   });
 
diff --git a/packages/ui/src/useApp.ts b/packages/ui/src/useApp.ts
index 4c916e022..1f8de381b 100644
--- a/packages/ui/src/useApp.ts
+++ b/packages/ui/src/useApp.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { inject, onMounted, onUnmounted } from 'vue';
+import { inject, onBeforeUnmount, onMounted } from 'vue';
 
 import Core from '@tmagic/core';
 import type { MComponent } from '@tmagic/schema';
@@ -43,7 +43,7 @@ export default ({ config, methods }: UseAppOptions) => {
     node?.emit('mounted', emitData);
   });
 
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     node?.emit('destroy', emitData);
   });