diff --git a/README.md b/README.md index 808f8be6..e744d5c4 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 - 📦 __可扩展__ ,借鉴Umi实现了完整的生命周期和插件化机制,插件可以管理项目的编译时和运行时,能力均可以通过插件封装进来,在 Fes.js 中协调有序的运行。 -- 📡 __面向未来__ ,在满足需求的同时,我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能,已使用webpack5提升构建性能和实现微服务,未来会探索vite等新技术。 +- 📡 __面向未来__ ,在满足需求的同时,我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能,已使用webpack5 和 vite提升构建性能和实现微服务。 ## 插件 diff --git a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl index 3a6db84d..e85882e8 100644 --- a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl +++ b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl @@ -6,9 +6,10 @@ import { computed, onBeforeUnmount, onMounted, + shallowRef, } from "vue"; import { loadMicroApp } from "{{{QIANKUN}}}"; -import { mergeWith } from "{{{LODASH_ES}}}"; +import { mergeWith, cloneDeep, isEqual } from "{{{LODASH_ES}}}"; // eslint-disable-next-line import/extensions import { getMasterOptions } from "./masterOptions"; @@ -66,12 +67,27 @@ export const MicroApp = defineComponent({ }); - const propsConfigRef = computed(() => { - return { - ...propsFromConfigRef.value, - ...props.props, - }; - }); + const propsConfigRef = shallowRef({}); + + watch( + [() => props.props, () => attrs, propsFromConfigRef], + () => { + // 使用深拷贝去掉主应用数据和子应用数据的引用关系,避免出现副作用。 + const newProps = cloneDeep({ + ...propsFromConfigRef.value, + ...props.props, + ...attrs + }); + // 避免第一次无意义update + if(!isEqual(newProps, propsConfigRef.value)) { + propsConfigRef.value = newProps + } + }, + { + deep: true, + immediate: true + } + ); // 只有当name变化时才重新加载新的子应用 const loadApp = () => { @@ -84,7 +100,7 @@ export const MicroApp = defineComponent({ name: `${name}_${props.cacheName || ''}`, entry: entry, container: containerRef.value, - props: {...propsConfigRef.value, ...attrs} + props: propsConfigRef.value }, { ...globalSettings, @@ -138,7 +154,7 @@ export const MicroApp = defineComponent({ } // 返回 microApp.update 形成链式调用 - return microApp.update({...propsConfigRef.value, ...attrs}); + return microApp.update(propsConfigRef.value); } } ); diff --git a/packages/fes-plugin-qiankun/src/micro/runtime/qiankunModel.tpl b/packages/fes-plugin-qiankun/src/micro/runtime/qiankunModel.tpl index 93bf2383..c1223729 100644 --- a/packages/fes-plugin-qiankun/src/micro/runtime/qiankunModel.tpl +++ b/packages/fes-plugin-qiankun/src/micro/runtime/qiankunModel.tpl @@ -1,8 +1,9 @@ import { reactive } from 'vue'; - +import { cloneDeep } from 'lodash-es' let initState = reactive({}); const setModelState = (props) => { - Object.assign(initState, props) + // 使用深拷贝去掉主应用数据和子应用数据的引用关系,避免出现副作用。 + Object.assign(initState, cloneDeep(props)) }; export default () => initState;