From 6ed8fd1ddc9e087e125b36334d47bbc42763b370 Mon Sep 17 00:00:00 2001 From: "2817212736@qq.com" <2817212736@qq.com> Date: Wed, 4 Jun 2025 14:48:36 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=A4=B1=E6=95=88=E7=9A=84Re?= =?UTF-8?q?f=E5=85=B3=E9=94=AE=E5=AD=97=EF=BC=8C=E6=9B=B4=E6=96=B0receiver?= =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E6=97=B6=E6=9C=BA=E4=B8=BAmounted?= =?UTF-8?q?=E8=80=8C=E9=9D=9Esetup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/App.vue | 9 +++++---- src/components/DemiHelper.ts | 17 +++++++++++------ src/components/Invoker.ts | 9 +++++++-- src/components/Receiver.ts | 35 +++++++++++++++++++---------------- vue-modpage-1.0.4.tgz | Bin 9053 -> 0 bytes 6 files changed, 43 insertions(+), 29 deletions(-) delete mode 100644 vue-modpage-1.0.4.tgz diff --git a/package.json b/package.json index 1418b7d..61077a3 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "vue-modpage", "private": true, - "version": "1.0.6", + "version": "1.0.11", "type": "module", "files": [ "public", diff --git a/src/App.vue b/src/App.vue index 7baf00b..1dc0011 100644 --- a/src/App.vue +++ b/src/App.vue @@ -22,16 +22,16 @@ const dom = ref(h(SlotTester, null, { default: () => [ onMounted(() => { setTimeout(() => { - console.log(test.value); + console.log(testRef.value); }, 3000); }); -const test = ref(); +const testRef = ref(); const vueVer = version; const items = [ // 原生元素渲染测试 { - tag: 'div', data: { ref: test, style: { backgroundColor: 'gray', padding: '10px' } }, children: '1. 字符串渲染测试' + tag: 'div', data: { style: { backgroundColor: 'gray', padding: '10px' } }, children: '1. 字符串渲染测试' }, { tag: 'div', data: { style: { background: 'cyan', padding: '10px' } }, children: [ @@ -65,11 +65,12 @@ const items = [ { tag: 'test-parent', data: { + ref: testRef, message: '8. 事件调用测试', style: 'color: red', onCallback: (msg) => { // 事件测试（可能要测试NativeOn?） alert(msg); - console.log(test.value) + console.log(testRef.value) } } } diff --git a/src/components/DemiHelper.ts b/src/components/DemiHelper.ts index c133a7c..23336e7 100644 --- a/src/components/DemiHelper.ts +++ b/src/components/DemiHelper.ts @@ -24,16 +24,17 @@ function splitAttrs(obj: object) : { attrs: Record, on: Record | null) { - // console.warn("Handling Vue2 data: ", rawData); - if (!rawData) return {}; + console.log("[ModPage Render Function] Handling Vue2 data: ", rawData); + if (!rawData) return null; if (isVue3) throw new Error("Vue3 data object is not supported in Vue2"); // Vue2分离式处理 else { const on = {}; // 可能需要区分NativeOn - const { class: cls, style, attrs = {}, props = {}, ...rest } = rawData; + // 从 rawData 中显式提取 ref，其余的放入 rest + const { class: cls, style, attrs = {}, props = {}, ref: v2Ref, ...rest } = rawData; - // 处理事件 + // 处理事件：从 rest 中提取事件处理器到 on 对象 for (const key in rest) { if (key.indexOf('on') == 0 && key != 'on') { const newKey = key[2].toLowerCase() + key.substring(3); @@ -44,8 +45,10 @@ function splitVue2Data(rawData?: Record | null) { class: cls, style, attrs: attrs, - props: { ...props, ...rest }, // 未明确的属性放入props + // props 现在由原始 props 和 rest 中剩余的非事件、非 ref 属性组成 + props: { ...props, ...rest }, on, + ref: v2Ref, // 将提取的 ref 放置在 v2data 的顶层 } return v2data; } @@ -132,5 +135,7 @@ export function hh(tag: string | object, data?: Record | null, chil // console.debug("Processed", { // processedTag, processedData, processedChildren // }); - return render(processedTag, processedData, processedChildren); + const result = render(processedTag, processedData, processedChildren); + console.log("[ModPage Render Function] result: ", result); + return result; } diff --git a/src/components/Invoker.ts b/src/components/Invoker.ts index 5103883..650c19b 100644 --- a/src/components/Invoker.ts +++ b/src/components/Invoker.ts @@ -2,6 +2,7 @@ import { defineComponent, h, isVue2, + markRaw, onMounted, onUnmounted, ref, @@ -51,7 +52,9 @@ export default defineComponent({ window[invokerKey][id] = { getRenderContext, initFinish, - receiver, + getReceiver() { + return receiver; + } }; @@ -77,9 +80,11 @@ export default defineComponent({ // vue3 渲染上下文 function getRenderContext() { - return props.items; + return markRaw(props.items); } + + // 用expose外部没有感知，用defineExpose在vue2会报错，没办法 expose({ getRefs, getRenderContext, diff --git a/src/components/Receiver.ts b/src/components/Receiver.ts index e0cedf2..a851f03 100644 --- a/src/components/Receiver.ts +++ b/src/components/Receiver.ts @@ -31,22 +31,25 @@ export default defineComponent({ const renderItems = ref(invokerContext.getRenderContext() ?? []); // 若Invoker未接收到当前实例(首次初始化)，则进行初始化 - if (!invokerContext.receiver) { - invokerContext.initFinish({ - get renderVersion() { - return renderVersion.value; - }, - Update: function (): void { - renderVersion.value += 1; - renderItems.value = invokerContext.getRenderContext() ?? []; - instance?.proxy?.$forceUpdate(); - }, - // @ts-ignore - get refs() { - return instance?.proxy?.$refs; - } - }); - } + onMounted(function () { + if (!invokerContext.receiver) { + invokerContext.initFinish({ + get renderVersion() { + return renderVersion.value; + }, + Update: function (): void { + renderVersion.value += 1; + renderItems.value = invokerContext.getRenderContext() ?? []; + instance?.proxy?.$forceUpdate(); + }, + // @ts-ignore + get refs() { + return instance?.proxy?.$refs; + } + }); + } + }) + return (createElem) => { const render = isVue2 ? createElem : h; diff --git a/vue-modpage-1.0.4.tgz b/vue-modpage-1.0.4.tgz deleted file mode 100644 index 05cb2790050d7eb54ec68b9750ad018d2e657d54..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9053 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 PCwl%LIB4Gz0Gt2-=h)>h