fix(vue): fix mount app not await unmount

umijs · Jan 15, 2024 · 6fa797d · 6fa797d
1 parent 2211516
commit 6fa797d
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 26 deletions.
diff --git a/examples/main/render/Vue3Render.js b/examples/main/render/Vue3Render.js
@@ -1,23 +1,48 @@
-import { createApp, h } from 'vue';
+import { createApp, h, onBeforeMount, onBeforeUnmount, ref } from 'vue';
 import { MicroApp } from '../../../packages/ui-bindings/vue/dist/esm';
 
+const sidemenu = document.querySelector('.mainapp-sidemenu');
+
+const microApps = [
+  { name: 'react15', entry: '//localhost:7102' },
+  { name: 'react16', entry: '//localhost:7100' },
+];
 
 function vueRender() {
   const application = createApp({
     components: {
     },
     render() {
       return h('div', [
-        this.message,
-        h(MicroApp, { name: 'react15', entry: '//localhost:7102' }),
-        this.message,
+        h(MicroApp, { name: this.name, entry: this.entry, autoCaptureError: true }),
       ]);
     },
     setup() {
-      const message = 'abc';
+      const name = ref('');
+      const entry = ref('');
+
+      const handleMenuClick = (e) => {
+        const app = microApps.find((app) => app.name === e.target.dataset.value);
+        if (app && app.name !== name.value) {
+          name.value = app.name;
+          entry.value = app.entry;
+        } else {
+          console.log('not found any app');
+        }
+      }
+
+      onBeforeMount(() => {
+        sidemenu.addEventListener('click', handleMenuClick);
+      });
+
+
+      onBeforeUnmount(() => {
+        sidemenu.removeEventListener('click', handleMenuClick);
+      });
 
       return {
-        message,
+        name,
+        entry,
       };
       // return () => h('div', [
       //   message.value,

diff --git a/packages/qiankun/src/version.ts b/packages/qiankun/src/version.ts
@@ -1 +1 @@
-export { version } from '../package.json';
+export const version = '3.0.0-rc.19';
diff --git a/packages/ui-bindings/vue/src/MicroApp.ts b/packages/ui-bindings/vue/src/MicroApp.ts
@@ -1,5 +1,16 @@
 import type { PropType } from 'vue-demi';
-import { computed, defineComponent, h, onMounted, reactive, ref, toRefs, watch, isVue2, onUnmounted } from 'vue-demi';
+import {
+  computed,
+  defineComponent,
+  h,
+  onMounted,
+  ref,
+  onBeforeUnmount,
+  shallowRef,
+  toRefs,
+  watch,
+  isVue2,
+} from 'vue-demi';
 import type { AppConfiguration, LifeCycles } from 'qiankun';
 import type { MicroAppType } from '@qiankunjs/ui-shared';
 import { mountMicroApp, omitSharedProps, unmountMicroApp, updateMicroApp } from '@qiankunjs/ui-shared';
@@ -50,20 +61,16 @@ export const MicroApp = defineComponent({
   },
   setup(props, { slots }) {
     const originProps = props;
-    const { name, wrapperClassName, className, appProps, ...propsFromParams } = toRefs(originProps);
+    const { name, wrapperClassName, className, appProps, autoCaptureError } = toRefs(originProps);
 
     const loading = ref(false);
     const error = ref<Error>();
 
     const containerRef = ref(null);
-    const microAppRef = ref<MicroAppType>();
-
-    const reactivePropsFromParams = computed(() => {
-      return omitSharedProps(reactive(propsFromParams));
-    });
+    const microAppRef = shallowRef<MicroAppType>();
 
     const isNeedShowError = computed(() => {
-      return slots.errorBoundary || reactivePropsFromParams.value.autoCaptureError;
+      return slots.errorBoundary || autoCaptureError.value;
     });
 
     // 配置了 errorBoundary 才改 error 状态，否则直接往上抛异常
@@ -97,15 +104,22 @@ export const MicroApp = defineComponent({
     };
 
     onMounted(() => {
+      // watch name 变更切换子应用
       watch(
         name,
         () => {
+          const prevApp = microAppRef.value;
+          // 销毁上一个子应用
           unmount();
 
+          // 初始化下一个子应用
           void mountMicroApp({
-            prevMicroApp: microAppRef.value,
+            prevMicroApp: prevApp,
             container: containerRef.value!,
-            componentProps: originProps,
+            componentProps: {
+              ...originProps,
+              ...appProps.value,
+            },
             setLoading: (l) => {
               loading.value = l;
             },
@@ -122,13 +136,17 @@ export const MicroApp = defineComponent({
       );
 
       watch(
-        [reactivePropsFromParams, appProps],
+        appProps,
         () => {
           updateMicroApp({
             microApp: microAppRef.value,
             setLoading: (l) => {
               loading.value = l;
             },
+            microAppProps: {
+              ...omitSharedProps(originProps),
+              ...appProps.value,
+            },
           });
         },
         {
@@ -137,7 +155,7 @@ export const MicroApp = defineComponent({
       );
     });
 
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       unmount();
     });
 
@@ -157,16 +175,12 @@ export const MicroApp = defineComponent({
       microAppWrapperClassName,
       microAppClassName,
       rootRef,
-      reactivePropsFromParams,
       microApp: microAppRef,
     };
   },
 
   render() {
-    return this.reactivePropsFromParams.autoSetLoading ||
-      this.reactivePropsFromParams.autoCaptureError ||
-      this.$slots.loader ||
-      this.$slots.errorBoundary
+    return this.autoSetLoading || this.autoCaptureError || this.$slots.loader || this.$slots.errorBoundary
       ? h(
           'div',
           {
@@ -177,7 +191,7 @@ export const MicroApp = defineComponent({
               ? typeof this.$slots.loader === 'function'
                 ? this.$slots.loader(this.loading)
                 : this.$slots.loader
-              : this.reactivePropsFromParams.autoSetLoading &&
+              : this.autoSetLoading &&
                 h(MicroAppLoader, {
                   ...(isVue2
                     ? {
@@ -194,7 +208,7 @@ export const MicroApp = defineComponent({
                 ? typeof this.$slots.errorBoundary === 'function'
                   ? this.$slots.errorBoundary(this.error)
                   : this.$slots.errorBoundary
-                : this.reactivePropsFromParams.autoCaptureError &&
+                : this.autoCaptureError &&
                   h(ErrorBoundary, {
                     ...(isVue2
                       ? {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { version } from '../package.json';
		export const version = '3.0.0-rc.19';