diff --git a/examples/main/render/Vue3Render.js b/examples/main/render/Vue3Render.js index 077247689..7cd0281e8 100644 --- a/examples/main/render/Vue3Render.js +++ b/examples/main/render/Vue3Render.js @@ -1,6 +1,12 @@ -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({ @@ -8,16 +14,35 @@ function vueRender() { }, 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 index a7250834f..87c2b4ef0 100644 --- 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'; \ No newline at end of file diff --git a/packages/ui-bindings/vue/src/MicroApp.ts b/packages/ui-bindings/vue/src/MicroApp.ts index 0c9ea8a7b..e9ebd1d1a 100644 --- 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(); const containerRef = ref(null); - const microAppRef = ref(); - - const reactivePropsFromParams = computed(() => { - return omitSharedProps(reactive(propsFromParams)); - }); + const microAppRef = shallowRef(); 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 ? {