Vue 3 代理对象或虚拟 DOM 中 HTML 的快照

Question

正在打印 javascript 包装我的虚拟 Vue3 应用程序的“代理”对象完美地显示了我想要提取的特定值。

console.log(proxyVueApp) ...在 proxyVueApp.$.vnode.el.outerHTML 的深处输出美丽的 HTML。

直接使用 console.log(proxyVueApp.$.vnode.el) 访问道具会给我一个 HTML-评论，因为它是一个虚拟的 DOM：。 console.log(proxyVueApp.$.vnode.el.outerHTML) 是 undefined.

有没有办法以某种方式抓住这个 HTML？

现在了解详情。以下是我如何创建我的 Vue 实例、导入一个动态组件并将其全部挂载：

const proxyVueApp = createApp({
    render() {
        const relPath = 'some/path';
        const compReference = defineAsyncComponent(() =>
            import(relPath /* @vite-ignore */)
        );
        return h(compReference);
    },
});
const el = document.createElement('div');
const mountedApp = proxyVueApp.mount(el);

有没有办法从我的 mountedApp 或 HTMLObjectThingo el 中提取我亲眼看到的 HTML？我觉得我正在处理一个薛定谔猫的案例。该元素既死又活。

Answer 1

您可以使用 SSR 的工作方式来实现您的目标

import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'

const app = createSSRApp({
  data: () => ({ count: 1 }),
  template: `<button @click="count++">{{ count }}</button>`
})

renderToString(app).then((html) => {
  // this is what you want
  console.log(html)
})

Answer 2

这是我基于 Duannx 答案的完整解决方案。它取出了一个 Storybook 生命周期上下文：

import { createApp, defineAsyncComponent, h } from 'vue';
import { renderToString } from '@vue/server-renderer';

let html = '';
const tempApp = createApp({
        render() {
            const relPath = 'path/to/component.vue';
            const compReference = defineAsyncComponent(() => import(relPath));
            return h(compReference);
        }
    });
renderToString(tempApp).then((h) => {
        html = h;
});

Vue 3 代理对象或虚拟 DOM 中 HTML 的快照

Snapshot of HTML in Vue3 Proxy object or vitual DOM

javascript

virtual-dom

vuejs3