fix(vue): add unmount hook to unmount application #2849

linghaoSu · 2023-12-19T13:23:40Z

Checklist

npm test passes
tests are included
documentation is changed or added
commit message follows commit guidelines

Description of change

注册 umount hook 卸载子应用
提供 appProps 作为属性传递给子应用，防止被注册为 attributes

related issue: #2846

changeset-bot · 2023-12-19T13:23:43Z

🦋 Changeset detected

Latest commit: ea3510f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@qiankunjs/vue	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2023-12-19T13:23:44Z

@linghaoSu is attempting to deploy a commit to a Personal Account owned by @umijs on Vercel.

@umijs first needs to authorize it.

qiYuei · 2023-12-20T02:11:33Z

packages/ui-bindings/vue/src/MicroApp.ts

@@ -134,6 +149,10 @@ export const MicroApp = defineComponent({
      );
    });

+    onMounted(() => {


生命周期错了吧

qiYuei · 2023-12-20T02:23:54Z

packages/ui-bindings/vue/src/MicroApp.ts

+      if (microApp) {
+        microApp._unmounting = true;
+
+        unmountMicroApp(microApp).catch((err: Error) => {


@kuitos 卸载这一块要不要 await 下，不等上一个应用A卸载完就加载应用B并跳转路由。有时候会匹配到A应用的404路由

你是指通过同一个组件切 name 的方式切换子应用的场景的吗？

是的, 改变name跟entry ，再push路由。

那需要存一下前一个的 unmountPromise

这里 await 好像没啥意义。

在你说的场景下，await 也解决不了的，切换本身也是一个异步行为。

目前已经通过 _unmounting 这个同步标志位来处理了。

这个标志位好像作用也不大，按理来说应该是等上一个子应用完全卸载完再进行路由跳转

qiYuei · 2023-12-20T02:29:11Z

@linghaoSu 漏了，切换应用是清除 error 信息

kuitos · 2023-12-20T12:01:56Z

packages/ui-bindings/vue/src/MicroApp.ts

+      if (microApp) {
+        microApp._unmounting = true;
+
+        unmountMicroApp(microApp).catch((err: Error) => {


你是指通过同一个组件切 name 的方式切换子应用的场景的吗？

kuitos · 2023-12-20T12:02:32Z

packages/ui-bindings/vue/src/MicroApp.ts

  },
  setup(props, { slots }) {
    const originProps = props;
-    const { name, wrapperClassName, className, ...propsFromParams } = toRefs(originProps);
+    const { name, wrapperClassName, className, appProps, ...propsFromParams } = toRefs(originProps);


有了 appProps 就不需要读 propsFromParams 了吧

kuitos · 2023-12-20T12:03:51Z

packages/ui-bindings/vue/src/MicroApp.ts

-
-            microAppRef.value = undefined;
-          }
+          unmount();


这里为啥要调 unmount ？

利用 name 切换子应用时，先将前一个子应用 unmount

这里应该可以去掉，我看最新的 mountMicroApp 已经有对上一个应用进行卸载的操作。然后最好判断下 name 是否存在再调用mountMicroApp。
相关pr

最新的 pr 应该没有在 mountMicroApp 进行卸载，只是做了如果上一个应用正在卸载，使用 await 等待卸载完毕再执行 mount 操作

kuitos · 2023-12-20T12:07:47Z

packages/ui-bindings/vue/src/MicroApp.ts

@@ -118,14 +129,18 @@ export const MicroApp = defineComponent({
      );

      watch(
-        reactivePropsFromParams,
+        [reactivePropsFromParams, appProps],
        () => {
          updateMicroApp({
            getMicroApp: () => microAppRef.value,


这里为啥要传一个 getter 而不是直接把 microApp 引用传过去？ @bravepg

这里为啥要传一个 getter 而不是直接把 microApp 引用传过去？ @bravepg

确实，直接传值更简单，我改下

kuitos · 2024-01-09T08:50:45Z

@linghaoSu 评论的问题再看一下

…ide props to sub-application

linghaoSu · 2024-01-09T14:31:33Z

@linghaoSu 评论的问题再看一下

ok, 本周会处理一下

qiYuei · 2024-01-16T01:46:20Z

packages/ui-bindings/vue/src/MicroApp.ts

+            microAppProps: {
+              ...omitSharedProps(originProps),
+              ...appProps.value,
+            },
          });
        },
        {


这里不应该不用深度监听，甚至 ref 都不用， shallowRef 就好。因为可能传递各种实例,或者组件啥的下去没必要 observe 一次。

react 的版本现在就是 deepCompare 的

qiankun/packages/ui-bindings/react/src/MicroApp.tsx

Line 93 in fb91153

}, [useDeepCompare(omitSharedProps(componentProps))]);

vue 里有更合理的方案实现类似的效果吗？

不使用深度监听的话，以目前暴露的接口来说，是没有主动更新 vue 组件里的子应用的能力的，是否需要把子应用实例或者是更新方法暴露给使用者

此外，目前 vue 里如果使用 shallowRef 或者仅仅浅层 watch props 中的 appProps ，这种方式仅能检测到引用的变化，对于 appProps 内部的变化是无法检测到的，可能不太符合预期？

一般来说 react 要改变 componentProps 里面的状态一般也是 {...componentProps} 这样吧，如果是这样 vue 这边可以用 shallowRef 然后 lodash.isEqual 比较新旧值来判断是否要更新 micro。我是感觉 deep watch appProps 虽然简单但是有点耗性能。

跟react版本保持一致吧，还是深度监听吧

kuitos · 2024-01-17T03:30:38Z

packages/qiankun/src/version.ts

@@ -1 +1 @@
-export { version } from '../package.json';
+export const version = '3.0.0-rc.19';


这个不要提交

kuitos

LGTM

qiYuei reviewed Dec 20, 2023

View reviewed changes

linghaoSu force-pushed the fix/vue-unmount branch from 999867c to 573e604 Compare December 20, 2023 02:16

qiYuei reviewed Dec 20, 2023

View reviewed changes

kuitos reviewed Dec 20, 2023

View reviewed changes

qiYuei mentioned this pull request Dec 22, 2023

feat: refactor-microapp #2853

Merged

linghaoSu and others added 2 commits January 9, 2024 22:19

fix(vue): add unmount hook to unmount application & add appProps prov…

3fcb27e

…ide props to sub-application

Create rich-parents-relate.md

2211516

linghaoSu force-pushed the fix/vue-unmount branch from c981a2a to 7ab7ffb Compare January 15, 2024 15:03

linghaoSu requested review from kuitos, bravepg and qiYuei January 15, 2024 15:04

fix(vue): fix mount app not await unmount

6fa797d

linghaoSu force-pushed the fix/vue-unmount branch from 7ab7ffb to 6fa797d Compare January 15, 2024 15:14

qiYuei reviewed Jan 16, 2024

View reviewed changes

kuitos reviewed Jan 17, 2024

View reviewed changes

fix(ui): revert version file

ea3510f

linghaoSu force-pushed the fix/vue-unmount branch from a11df10 to ea3510f Compare January 17, 2024 14:47

kuitos approved these changes Jan 28, 2024

View reviewed changes

kuitos merged commit f6926d3 into umijs:next Jan 28, 2024
5 of 6 checks passed

kuitos linked an issue Feb 27, 2024 that may be closed by this pull request

[Bug] 3.0的React/Vue组件 #2846

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(vue): add unmount hook to unmount application #2849

fix(vue): add unmount hook to unmount application #2849

linghaoSu commented Dec 19, 2023

changeset-bot bot commented Dec 19, 2023 •

edited

Loading

vercel bot commented Dec 19, 2023

qiYuei Dec 20, 2023

linghaoSu Dec 20, 2023

qiYuei Dec 20, 2023

kuitos Dec 20, 2023

qiYuei Dec 21, 2023

kuitos Dec 21, 2023

bravepg Dec 21, 2023

qiYuei Dec 21, 2023

qiYuei commented Dec 20, 2023

kuitos Dec 20, 2023

kuitos Dec 20, 2023

linghaoSu Jan 15, 2024

kuitos Dec 20, 2023

linghaoSu Jan 15, 2024

qiYuei Jan 16, 2024 •

edited

Loading

linghaoSu Jan 16, 2024

kuitos Dec 20, 2023

bravepg Dec 21, 2023

kuitos commented Jan 9, 2024

linghaoSu commented Jan 9, 2024

qiYuei Jan 16, 2024

kuitos Jan 17, 2024

linghaoSu Jan 18, 2024

qiYuei Jan 18, 2024 •

edited

Loading

kuitos Jan 19, 2024

kuitos Jan 17, 2024

linghaoSu Jan 17, 2024

kuitos left a comment

		@@ -1 +1 @@
		export { version } from '../package.json';
		export const version = '3.0.0-rc.19';

fix(vue): add unmount hook to unmount application #2849

fix(vue): add unmount hook to unmount application #2849

Conversation

linghaoSu commented Dec 19, 2023

Checklist

Description of change

changeset-bot bot commented Dec 19, 2023 • edited Loading

🦋 Changeset detected

vercel bot commented Dec 19, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

qiYuei commented Dec 20, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

qiYuei Jan 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kuitos commented Jan 9, 2024

linghaoSu commented Jan 9, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

qiYuei Jan 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kuitos left a comment

Choose a reason for hiding this comment

changeset-bot bot commented Dec 19, 2023 •

edited

Loading

qiYuei Jan 16, 2024 •

edited

Loading

qiYuei Jan 18, 2024 •

edited

Loading