Vue3组件直接挂载DOM方法

Vue3 告别传统根实例挂载方式！本文深入解析如何在非 Vue CLI 项目中，无需 `createApp().mount('#app')`，直接将 Vue3 组件挂载到任何 DOM 元素上。我们将学习利用 `createVNode` 和 `render` API，实现组件的灵活嵌入和独立部署。更进一步，本文还将提供基于 Vite 的 `import.meta.glob` 实现，自动化发现并挂载页面中的 Vue 组件，例如将后端渲染的 `` 标签转化为真正的 Vue 组件实例。掌握此技巧，能帮助开发者在现有后端渲染页面中逐步集成 Vue3，或构建更灵活的微前端架构，实现 Vue 组件与传统页面内容的无缝融合，提升Web应用开发的效率和灵活性。

本教程将指导如何在后端渲染的页面中，不依赖全局根#app元素，独立地将Vue 3组件挂载到任意DOM元素上。我们将探讨使用Vue的createVNode和render API进行手动挂载，并提供一个基于Vite的import.meta.glob实现，实现组件的自动化发现与挂载，从而实现Vue组件与传统页面内容的无缝集成。

在现代Web开发中，将前端框架逐步集成到已有的后端渲染页面或构建微前端架构是常见需求。Vue 3提供了一套灵活的API，允许开发者将单个组件挂载到页面上的任何DOM元素，而无需强制性的全局根实例（如#app）。这对于逐步迁移旧系统、增强特定区域交互性或实现组件级独立部署具有重要意义。

理解传统Vue应用挂载与独立组件挂载的区别

通常，一个Vue应用通过createApp(App).mount('#app')将一个根组件（App.vue）挂载到具有特定ID（#app）的DOM元素上。这种方式会接管该DOM元素及其所有子内容，并将其替换为Vue根组件的模板。

然而，在许多场景下，我们可能希望在不破坏现有HTML结构的前提下，仅将特定的Vue组件注入到页面中的某个位置。例如，一个后端渲染的页面可能包含多个这样的自定义HTML标签，我们希望Vue能够识别这些标签并将其转换为活的Vue组件实例。为了实现这一点，我们需要利用Vue 3更底层的渲染API：createVNode和render。

核心API：createVNode与render

createVNode用于创建一个虚拟DOM节点（VNode），它是Vue组件实例的轻量级描述。render函数则负责将这个VNode渲染到指定的真实DOM元素上。通过这两个API，我们可以精确控制组件的创建和挂载位置。

1. 创建挂载辅助函数

首先，我们定义一个辅助函数mountComponent，它将简化组件的创建和挂载过程：

import { createVNode, render } from 'vue';

/**
 * 将Vue组件挂载到指定的DOM元素
 * @param {import('vue').App} app - Vue 3应用实例 (用于提供上下文)
 * @param {HTMLElement} elem - 目标DOM元素
 * @param {import('vue').Component} component - 要挂载的Vue组件定义
 * @param {object} props - 传递给组件的props
 * @returns {import('vue').ComponentPublicInstance} 挂载后的组件实例
 */
function mountComponent(app, elem, component, props) {
    // 1. 创建虚拟DOM节点 (VNode)
    let vNode = createVNode(component, props);

    // 2. 将VNode与Vue应用上下文关联
    // 这一步是关键，它确保了组件能够访问到Vue应用的全局配置、插件、Provide/Inject等
    vNode.appContext = app._context;

    // 3. 将VNode渲染到指定的DOM元素
    render(vNode, elem);

    // 返回组件实例，如果需要进一步操作
    return vNode.component;
}

参数说明：

• app: 一个Vue 3应用实例。即使我们不使用传统的app.mount('#app')，也需要一个Vue应用实例来提供上下文，例如注册全局组件、使用插件（如Vue Router、Vuex）或提供provide/inject。
• elem: 目标DOM元素，即我们希望Vue组件渲染到的位置。
• component: 要挂载的Vue组件定义（通常是从.vue文件导入的默认导出）。
• props: 一个对象，包含要传递给组件的属性。

2. 基本使用示例

假设我们有一个HelloWorld.vue组件：

在后端渲染的HTML中，可能存在这样的结构：

  

    
欢迎来到我的网站！
  
  
  

    
© 2023 My Company
  

现在，在你的JavaScript入口文件（例如main.js或exec.js）中，你可以这样手动挂载HelloWorld组件：

// main.js 或 exec.js
import { createApp } from 'vue';
import HelloWorld from './src/components/HelloWorld.vue';
// 假设 mountComponent 辅助函数已定义或从单独文件导入
// import { mountComponent } from './utils/mountComponent'; 

// 创建一个Vue应用实例，它不挂载到任何DOM元素，仅作为上下文提供者
const app = createApp({});

// 如果需要，可以在这里注册全局组件或使用插件
// app.component('SomeGlobalComponent', SomeGlobalComponent);
// app.use(router);

// 找到页面中所有  标签
document.querySelectorAll('hello-world').forEach(elem => {
    // 提取props
    const props = {};
    // 示例：从

到这里，我们也就讲完了《Vue3组件直接挂载DOM方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！