test: 渲染器应用深度监听当入参发生变化时重新渲染组件

apps/renderer/src/App.vue

@@ -266,26 +266,32 @@ const setupWujiePropsWatcher = () => {
       // 更新快照
       prevPropsSnapshot = currentPropsSnapshot;
 
-      // 更新 initParams
+      // 获取当前的 props，并确保创建新的对象引用
-      const newParams = window.$wujie.props as WujieProps;
+      const newProps = JSON.parse(currentPropsSnapshot);
       const oldParams = initParams.value;
 
-      // 更新参数
+      // 创建新的引用，确保子组件能检测到变化
-      initParams.value = newParams;
+      initParams.value = {
+        ...newProps,
+        _timestamp: Date.now(), // 添加时间戳确保每次更新都是新对象
+      };
 
-      console.log('initParams', initParams.value);
+      console.log('initParams 已更新为新对象:', initParams.value);
 
       // 如果核心参数发生变化，重新加载组件
       if (
-        isValidParams(newParams) &&
+        isValidParams(initParams.value) &&
-        (oldParams?.fileId !== newParams.fileId ||
+        (oldParams?.fileId !== initParams.value.fileId ||
-          oldParams?.projectId !== newParams.projectId)
+          oldParams?.projectId !== initParams.value.projectId)
       ) {
         console.log('核心参数发生变化，重新加载组件');
         reloadComponent();
+      } else {
+        // 即使没有重新加载组件，也需要强制更新渲染器
+        forceUpdateRenderer();
       }
     }
-  }, 300); // 每300ms检查一次，避免过于频繁
+  }, 300);
 
   // 组件卸载时清除定时器
   onBeforeUnmount(() => {
@@ -293,6 +299,25 @@ const setupWujiePropsWatcher = () => {
   });
 };
 
+// 添加一个方法强制更新渲染器
+const forceUpdateRenderer = () => {
+  if (renderer.value && typeof renderer.value.update === 'function') {
+    // 如果渲染器组件提供了 update 方法，调用它
+    console.log('调用渲染器的 update 方法');
+    renderer.value.update(initParams.value);
+  } else {
+    // 尝试通过临时移除并重新添加组件来强制刷新
+    console.log('强制刷新渲染器组件');
+    const temp = renderer.value;
+    renderer.value = null;
+
+    // 在下一个周期重新设置组件，强制重新渲染
+    setTimeout(() => {
+      renderer.value = temp;
+    }, 0);
+  }
+};
+
 // 重新加载组件的函数
 const reloadComponent = async () => {
   if (!isValidParams(initParams.value)) {
@@ -383,8 +408,10 @@ onMounted(async () => {
 
 <template>
   <div class="renderer-container">
-    <renderer
+    <component
+      :is="renderer"
       v-if="renderer"
+      :key="initParams?._timestamp || 'default'"
       :ctx-props="initParams"
       v-bind="initParams"
       style="width: 100%; height: 100%"