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 05cb279..0000000 Binary files a/vue-modpage-1.0.4.tgz and /dev/null differ