Vue 3 如何正确迁移编程式子组件实例创建逻辑并消除警告

问题原因分析 #

• 第一种写法触发警告原因：createApp会创建独立的应用上下文，对同一个router实例重复调用use()方法，会导致Router内置组件RouterLink、RouterView重复注册，触发警告。
• 第二种写法报错原因：Vue 3不再支持直接在根配置项传入router、store字段完成依赖注入，必须通过app.use()注册或在渲染时继承已有的上下文，因此第二种写法中store未被正确注入，触发属性读取报错。

最优实现方案 #

核心思路：不创建独立的新应用实例，使用Vue 3暴露的createVNode和render方法渲染组件，直接复用主应用上下文，同时缓存实例保证单例。

import { createVNode, render } from 'vue'
import ChildComponent from './ChildComponent'

// 全局缓存实例与虚拟节点，保证单例
let childInstance = null
let childVNode = null

function mountChildComponent(containerSelector = '#child-container') {
  const container = document.querySelector(containerSelector)
  // 已创建过实例直接复用，仅重新挂载到目标容器
  if (childInstance) {
    render(childVNode, container)
    return childInstance
  }
  // 创建组件虚拟节点
  childVNode = createVNode(ChildComponent)
  // 继承当前主应用的上下文，自动复用已注册的router、store、全局组件/指令等
  childVNode.appContext = this.$.appContext
  // 渲染到指定容器
  render(childVNode, container)
  // 缓存组件实例
  childInstance = childVNode.component.proxy
  return childInstance
}

// 按需调用的卸载方法
function unmountChildComponent(containerSelector = '#child-container') {
  render(null, document.querySelector(containerSelector))
}

方案优势 #

1. 直接复用主应用已完成注册的所有全局依赖，不会触发组件重复注册警告
2. 组件行为和普通模板中调用完全一致，无需额外配置全局组件、指令
3. 实例全局缓存，不管在任意布局容器下调用挂载方法，都使用同一个实例，完全满足单实例需求

备选方案（仅当必须使用createApp时选用） #

如果因为特殊需求必须创建独立应用上下文，可以在注册依赖前判断是否已完成注册，避免重复操作：

import ChildComponent from './ChildComponent'
const childApp = createApp(ChildComponent)
// 仅当未注册过Router内置组件时才注册router
if (!childApp._context.components.RouterLink) {
  childApp.use(this.$router)
}
// 仅当未注入过store时才注册store
const storeKey = this.$store?.constructor?.install?.installKey || 'store'
if (!childApp._context.provides[storeKey]) {
  childApp.use(this.$store)
}
childApp.mount('#child-container')

注意：该方案创建的是独立应用上下文，主应用注册的全局组件、指令无法直接使用，需要手动重新注册，非特殊场景不推荐使用。

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