diff --git a/apps/renderer/src/App.vue b/apps/renderer/src/App.vue index c21e192..8e44a37 100644 --- a/apps/renderer/src/App.vue +++ b/apps/renderer/src/App.vue @@ -266,26 +266,32 @@ const setupWujiePropsWatcher = () => { // 更新快照 prevPropsSnapshot = currentPropsSnapshot; - // 更新 initParams - const newParams = window.$wujie.props as WujieProps; + // 获取当前的 props,并确保创建新的对象引用 + 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) && - (oldParams?.fileId !== newParams.fileId || - oldParams?.projectId !== newParams.projectId) + isValidParams(initParams.value) && + (oldParams?.fileId !== initParams.value.fileId || + 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 () => {