From c64bd4844d3bde1d69da45fdaefc348ba0fbb5a0 Mon Sep 17 00:00:00 2001
From: wanchun <445436867@qq.com>
Date: Mon, 1 Aug 2022 14:33:31 +0800
Subject: [PATCH] =?UTF-8?q?fix(plugin-qiankun):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=B8=BB=E5=BA=94=E7=94=A8=E7=8A=B6=E6=80=81=E5=8F=98=E6=9B=B4?=
 =?UTF-8?q?=E5=90=8E=E4=BD=BF=E7=94=A8useModel=E6=B2=A1=E6=9C=89=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/runtime/MicroApp.tpl             | 34 ++++++++++++++-----
 .../src/micro/runtime/qiankunModel.tpl        |  5 +--
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl
index 4e524891..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;