fix: plugin-qiankun修复主应用更新数据子应用使用useModel可能无法响应问题

README.md

@@ -46,7 +46,7 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
 
 - 📦  __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
 
-- 📡  __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。
+- 📡  __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5 和 vite提升构建性能和实现微服务。
 
 ## 插件
 

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);
                         }
                     }
                 );

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;