Vue3 动态挂载组件怎么继承上下文：appContext 的两种传法

先给结论：用 createVNode 加 render 手动挂载的组件，默认拿不到主应用的全局组件、provide 数据和插件能力，因为它没有挂载上下文。补上上下文有两种传法：手动给 vnode 赋 appContext，或者用 Vue 3.3 之后的 app.runWithContext 包一层。能不手动挂载就别手动挂载，优先用 Teleport。

Vue3 动态挂载组件时 appContext 的两种传递方式

做全局弹窗、消息提示这类组件时，很多人会遇到同一个怪现象：组件在页面里用得好好的，一旦改成动态挂载——用 JS 函数式调用（比如 Toast('保存成功')）创建——就报"组件未注册"，inject 也全是 undefined。根因不在组件本身，而在它是被"凭空"渲染出来的，跟主应用之间没有任何联系。

本文用一个可复现的 Toast 例子讲清这件事：先演示问题怎么复现，再给出两种补上下文的写法、各自的 Vue 版本边界，最后给出更推荐的 Teleport 方案。

先看结论

动态挂载出来的 vnode 没有 appContext，全局组件、provide、插件注入全部失效。
传法一：手动把主应用的 appContext 赋给 vnode，兼容所有 Vue 3 版本。
传法二：Vue 3.3 起用 app.runWithContext 包住调用，让内部的 inject 能拿到 app 级 provide。

本文涉及的 createVNode、render、Teleport 与 runWithContext 均以 Vue 3 官方文档为准（证据类型：官方文档）。组件注册相关细节，Vue3 教程里有按场景分组的说明。

一、最小场景与预期行为

任务定死：主应用里全局注册了一个图标组件，并通过 app.provide 注入了一份主题配置。现在要写一个函数式 Toast，调用后挂在 body 上，内部要能用那个图标组件和那份主题配置。

输入是一段 Vue 3 应用代码加一个 Toast 组件。预期行为是：Toast 正常渲染，图标不报错，主题色取值正确。

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.provide('theme', { primary: '#fe6a00' })
app.mount('#app')

export default app

// toast.js —— 问题版本
import { createVNode, render } from 'vue'
import Toast from './Toast.vue'

export function showToast(message) {
  const container = document.createElement('div')
  const vnode = createVNode(Toast, { message })
  render(vnode, container)
  document.body.appendChild(container)
}

这段做的是把 Toast 渲染到一个新建的 div 里再挂到 body。能显示出来的是 Toast 自己的模板，但 vnode 上没有 appContext，内部任何 inject 都拿不到值，全局注册的组件也解析不了。

预期结果（未在本机执行）：控制台出现"Failed to resolve component"警告，主题配置取到的是 undefined 而不是橙色。

二、传法一：手动给 vnode 补 appContext

最通用也最常见的做法：把主应用的 appContext 直接赋给这个 vnode。

import { createVNode, render, getCurrentInstance } from 'vue'
import Toast from './Toast.vue'
import app from './main'

export function showToast(message) {
  const container = document.createElement('div')
  const vnode = createVNode(Toast, { message })
  vnode.appContext = app._context
  render(vnode, container)
  document.body.appendChild(container)
}

这段做的是：从主应用实例上取出内部上下文对象，挂到 vnode 上。赋完之后，Toast 内部就能解析全局组件、拿到 app 级 provide。

从哪里拿 appContext 有两个选择：

从 app 实例拿：app._context，适合 Toast 这类在组件外部调用的工具函数。下划线前缀说明它是内部属性，官方文档不保证跨版本稳定，实用中是通行做法。
从当前组件实例拿：getCurrentInstance().appContext，适合在组件内部动态创建子节点的场景，好处是不用把 app 实例导出成模块单例。

关闭时别忘了清理：render(null, container) 卸载 vnode，再 container.remove() 移除节点。只移除 DOM 不卸载 vnode，事件与响应式副作用会留着，多次调用后内存持续增长。

手动挂载的 vnode 补上下文的两条路径

三、传法二：app.runWithContext 与更推荐的 Teleport

Vue 3.3 引入了 app.runWithContext，它解决的是"在组件外执行的代码里调用 inject"这个更窄的场景。

import { inject } from 'vue'
import app from './main'

export function readTheme() {
  return app.runWithContext(() => inject('theme'))
}

这段做的是：让传给 runWithContext 的函数在执行期间临时拥有应用的注入上下文，于是里面的 inject 能读到 app.provide 的值。

适用边界要讲清：runWithContext 解决的是"读"，不是"渲染"。它不会让一个 vnode 拥有上下文，所以做弹窗时它通常要和传法一配合使用，或者干脆不用。

更推荐的方案是 Teleport：不用动态挂载，而是把弹窗的 DOM 传送到 body，组件仍在应用的组件树内渲染：

<template>
  <Teleport to="body">
    <div v-if="visible" class="toast">{{ message }}</div>
  </Teleport>
</template>

这段做的是：模板结构写在组件里，渲染位置由 Teleport 指定到 body。上下文天然继承，不需要碰 appContext，也不存在下划线内部属性的兼容风险。代价是调用方式从函数式变回声明式，需要一个 visible 状态来控制。

四、常见失败分支与验证清单

4.1 全局组件仍然解析失败

只补了 appContext 还不够时，检查全局组件是不是在 createApp 之后、mount 之前注册的。注册时机晚于挂载的组件不会被记录进上下文。

4.2 inject 拿到的是默认值

说明 provide 是在某个组件里做的，而不是 app.provide。组件级 provide 只对它的后代生效，手动挂载的 vnode 不在那棵子树里，需要用 app.provide 提升到应用级。

4.3 关掉弹窗后内存一直涨

只移除了 DOM 没有卸载 vnode。修复办法是先 render(null, container) 再移除容器节点。

4.4 验证清单

检查：在 Toast 组件里打印 inject 的结果，确认不是 undefined
运行：连续调用 showToast 十次并逐次关闭
预期：图标正常渲染，主题色为橙色，DOM 节点数回到初始状态
失败：节点数持续增长 → 卸载逻辑缺失
修复：补上 render(null, container) 与 container.remove()
验证：在 Vue 3.2 与 3.4 两个版本各跑一次，确认传法一都可用

上面这些步骤做的是确认上下文生效、验证清理逻辑、跨版本回归。预期结果（未在本机执行）是两版表现一致；若 3.2 上 runWithContext 报未定义，属正常，它是 3.3 才有的 API。

动态挂载场景该选哪种方案的判断路径

总结

动态挂载的组件丢上下文，是因为 vnode 上没有 appContext。两条补法各有位置：手动赋值兼容所有 Vue 3 版本但用到内部属性；runWithContext 只解决组件外 inject。需要 DOM 挂到别处又想保留上下文时，Teleport 才是第一选择。

三条要点带走：

函数式弹窗两大坑：全局组件解析失败、inject 拿不到值，根因都是缺 appContext；
卸载必须 render(null, container) 与移除节点两步都做，只做一半会泄漏；
组件级 provide 对手动挂载的 vnode 无效，要提升到 app.provide。

下一步建议把项目里的函数式弹窗统一收口到一个工具模块，appContext 只在一处赋值，避免各处各写一份。组件注册与通信的更多细节，Vue3 课程里有更完整的清单。

常见问题

Q：为什么组件里用得好好的，动态挂载就报未注册？

A：全局组件是注册在应用上下文里的。手动创建的 vnode 没有这个上下文，解析时找不到注册记录，补上 appContext 即可。

Q：app._context 是内部属性，用了会不会有问题？

A：它是内部属性，官方不保证跨版本稳定，但目前是社区通行做法。想完全避开内部属性，就改用 Teleport 方案。

Q：app.runWithContext 能替代 appContext 赋值吗？

A：不能。它只让回调函数在执行期间能读到应用级 provide，不改变 vnode 的挂载上下文。渲染场景仍需传法一。

Q：Teleport 能完全替代手动挂载吗？

A：大多数弹窗场景可以。只有需要在纯 JS 环境（比如拦截器里）不经过组件树就弹出内容时，才需要动态挂载。

Q：关闭弹窗后事件监听还在吗？

A：如果只移除 DOM 不卸载 vnode，事件与响应式副作用都会留着。先 render(null, container) 再移除容器节点。

延伸学习

想把动态挂载这块练熟，可以按这个顺序来：

读一篇相关笔记 vue3 与 vue2 区别，把两个版本在应用实例上的差异看清；
想系统补一遍基础，Vue 3.0 新特性全面解析可以跟一遍；
想把示例里的渲染逻辑单独验证一遍，可以在在线代码实例里跑一跑。