Nuxt2迁移Nuxt3：如何从Vue3组件获取HTML用于地图标记

你需要实现的是在 Vue 3（Nuxt 3）环境下，手动创建组件实例、挂载后获取其 DOM 并插入到指定元素的功能，以下是对应 Nuxt 2 代码的正确等效实现：

import { createVNode, render } from 'vue'
import MapIcon from '~/components/elements/geo/map/marker/MapIcon.vue'

// 创建组件的虚拟节点，传入所需 props
const vnode = createVNode(MapIcon, {
  icon,
  wrapperClass,
  color
})

// 创建临时容器用于渲染组件
const tempContainer = document.createElement('div')
// 将虚拟节点渲染到临时容器，完成组件挂载
render(vnode, tempContainer)

// 获取挂载后的真实 DOM 元素
const iconDom = tempContainer.firstElementChild
// 插入到目标元素中（先清空原有内容）
markerElement.innerHTML = ''
markerElement.appendChild(iconDom)

说明与问题修正 #

你之前的尝试存在两个核心问题：

• 错误地将iconElement作为组件的子节点传入，而实际上 Vue 3 的render函数需要的是虚拟节点和真实 DOM 容器两个参数，并非子元素。
• 缺少将虚拟节点渲染为真实 DOM 的完整步骤，导致组件没有完成挂载。

Vue 2 与 Vue 3 的核心差异 #

• Vue 2 中通过Vue.extend生成组件构造器，再实例化并调用$mount()挂载；Vue 3 采用虚拟节点机制，通过createVNode创建组件虚拟节点，再用render渲染到真实容器完成挂载。
• Vue 2 的propsData参数，在 Vue 3 中直接合并到createVNode的第二个 props 对象中传入即可。
• 若后续需要销毁该组件以避免内存泄漏，可调用render(null, tempContainer)完成卸载。

内容的提问来源于stack exchange，提问作者Titan