Vue3迁移：如何保留挂载div部分内容？组件替换问题求助

是的，Vue 3 完全取消了 Vue 2 里那种挂载根实例后自动替换页面中带有vue-前缀ID的元素为对应组件的隐式行为——这是 Vue 早期版本的遗留特性，Vue 3 为了简化核心逻辑、强化组件化规范，移除了这个非标准的自动匹配机制。

要实现类似效果，推荐以下几种方式：

1. 标准组件引用（最推荐） #

这是符合 Vue 3 设计理念的做法，直接在根组件的模板中显式引用组件：

首先注册组件：

import { createApp } from 'vue'
import someDiv from './components/someDiv.vue'
import App from './App.vue'

const app = createApp(App)
app.component('someDiv', someDiv)
app.mount('#app')

然后在根组件App.vue的模板中使用：

<template>
  <!-- 保留原#app的结构，直接插入组件 -->
  <div>
    <someDiv />
  </div>
</template>

这种方式清晰可控，完全符合 Vue 3 的组件化规范，没有隐式逻辑，便于维护。

2. 手动挂载组件到指定元素（适配旧项目改造） #

如果不想大规模修改模板，需要复刻旧行为，可以手动查找页面元素并单独挂载组件：

import { createApp } from 'vue'
import someDiv from './components/someDiv.vue'

// 先挂载根应用到#app（如果需要保留根应用的其他逻辑）
const rootApp = createApp({
  // 根组件的内容或逻辑
})
rootApp.mount('#app')

// 手动找到目标元素并挂载组件
const targetEl = document.getElementById('vue-someDiv')
if (targetEl) {
  // 创建组件实例并挂载到目标元素
  createApp(someDiv).mount(targetEl)
}

这种方式可以快速适配旧项目的DOM结构，但属于“补丁式”写法，长期维护建议逐步迁移到标准组件引用。

3. 自定义逻辑批量匹配（接近Vue2旧行为） #

如果有多个这类需要自动匹配的组件，可以写一段批量处理逻辑，自动查找vue-前缀的元素并挂载对应组件：

import { createApp, h } from 'vue'
import someDiv from './components/someDiv.vue'
import otherComponent from './components/otherComponent.vue'

const app = createApp({
  mounted() {
    // 遍历所有带vue-前缀的ID元素
    document.querySelectorAll('[id^="vue-"]').forEach(el => {
      // 提取组件名称（去掉vue-前缀）
      const componentName = el.id.replace('vue-', '')
      // 从已注册的组件中获取对应组件
      const component = this.$app._context.components[componentName]
      
      if (component) {
        // 渲染组件到目标元素
        this.$renderer.render(h(component), el)
      }
    })
  }
})

// 注册所有需要匹配的组件
app.component('someDiv', someDiv)
app.component('otherComponent', otherComponent)

app.mount('#app')

注意：这种方式依赖Vue内部的_context和$renderer属性，属于非公开API，未来可能存在兼容性风险，仅临时过渡使用。

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