Vue 3 无组件实例：直接在DOM中构建响应式应用-js教程-PHP中文网

Vue 3 无组件实例：直接在DOM中构建响应式应用

聖光之護

发布： 2025-11-27 11:03:39

原创

376人浏览过

Vue 3 无组件实例：直接在DOM中构建响应式应用

在vue 3中，尽管组件是核心，但仍能像vue 2那样，无需独立组件文件即可直接在现有dom元素上创建响应式实例。通过 `createapp` 函数结合 `setup` 选项，开发者可以直接定义响应式数据和方法，并将其挂载到指定dom节点，从而实现轻量级、嵌入式的vue应用。本文将详细介绍两种主要实现方式：通过cdn引入和使用构建工具，并提供具体示例。

引言

在Vue.js 2中，开发者习惯于使用 new Vue() 构造函数直接将响应式功能注入到现有的DOM元素中，这是一种无需显式创建 .vue 组件文件即可快速启动Vue应用的优雅方式。这种模式特别适用于在非Vue项目中渐进式增强DOM元素的功能。进入Vue.js 3时代，其核心API发生了变化，但这种“无组件”模式依然有其对应的实现方式。Vue 3通过 createApp 函数提供了一个新的应用实例创建入口，结合 setup 选项，我们可以实现与Vue 2相似的直接DOM操作体验。

Vue 3 核心：createApp 与 setup

Vue 3移除了全局的 Vue 构造函数，取而代之的是 createApp 函数，它返回一个应用实例。这个实例可以被挂载到DOM元素上。在无组件模式下，我们通常会直接在 createApp 的配置对象中定义应用的逻辑和模板。

setup 选项是Vue 3组合式API的核心。它是一个函数，在组件实例创建之前执行，是定义响应式状态、计算属性、方法和侦听器的地方。在无组件模式中，setup 函数返回一个对象，该对象的属性将暴露给模板，使其具备响应式能力。

实现方式一：通过 CDN 引入 Vue

通过CDN引入Vue是实现无组件实例最直接的方式，适用于快速原型开发或在小型项目中嵌入Vue功能。

立即学习“前端免费学习笔记（深入）”；

1. 直接在 HTML 中定义模板

这种方式将模板内容直接写在要挂载的DOM元素内部。

HTML 文件 (index.html)：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 CDN 无组件示例 (HTML模板)</title>
    <!-- 引入 Vue 3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
    <div id="app">
        <div>{{ msg }}</div>
        <input v-model="msg" />
    </div>

    <script>
        // CDN Vue Import
        const { createApp, ref } = Vue;

        const app = createApp({
            setup() {
                // 定义响应式数据
                const msg = ref("Hello Vue 3!");

                // 返回的数据将暴露给模板
                return { msg };
            },
        }).mount('#app'); // 挂载到 id 为 'app' 的 DOM 元素
    </script>
</body>
</html>

登录后复制

说明：

我们通过 <script> 标签引入了Vue 3的全局构建版本。
在 createApp 中，我们定义了 setup 函数。
ref 是Vue 3组合式API中用于创建响应式引用的函数。msg 成为一个响应式数据。
setup 返回的对象 { msg } 使 msg 变量在 #app 内部的模板中可用。
mount('#app') 将Vue应用实例挂载到HTML中 id="app" 的 div 元素上，该 div 内部的HTML内容即作为应用的模板。

2. 使用字符串模板

另一种方式是在 createApp 配置中通过 template 选项提供一个字符串形式的模板。

Medeo

AI视频生成工具

191

查看详情

HTML 文件 (index.html)：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 CDN 无组件示例 (字符串模板)</title>
    <!-- 引入 Vue 3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
    <div id="app"></div> <!-- 空的挂载点 -->

    <script>
        // CDN Vue Import
        const { createApp, ref } = Vue;

        const app = createApp({
            setup() {
                const msg = ref("Hello Vue 3 with String Template!");
                return { msg };
            },
            // 使用字符串模板
            template: `
                <div>{{ msg }}</div>
                <input v-model="msg" />
            `
        }).mount('#app'); // 挂载到 id 为 'app' 的 DOM 元素
    </script>
</body>
</html>

登录后复制

说明：

与前一个例子不同，挂载点 #app 是一个空的 div。
template 选项接收一个字符串，该字符串将被解析为Vue应用的模板。这使得HTML结构更加清晰，因为Vue的逻辑和模板都集中在JavaScript代码中。

实现方式二：通过构建工具（CLI）

当项目规模稍大或需要模块化开发时，通常会使用Vue CLI或其他构建工具（如Vite）。在这种情况下，虽然我们可能仍然没有独立的 .vue 文件，但会利用ES模块的导入导出机制。

JavaScript 文件 (main.js 或 app.js)：

import { createApp, ref } from 'vue';

const app = createApp({
  setup() {
    const msg = ref("Hello Vue 3 from CLI!");
    return { msg };
  },
  // 同样可以使用字符串模板
  template: `
    <div>{{ msg }}</div>
    <input v-model="msg" />
  `
});

app.mount('#app');

登录后复制

HTML 文件 (index.html)：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 CLI 无组件示例</title>
</head>
<body>
    <div id="app"></div> <!-- 挂载点 -->
    <!-- 通过构建工具处理的 JS 入口文件 -->
    <script type="module" src="./main.js"></script> 
</body>
</html>

登录后复制

说明：

import { createApp, ref } from 'vue' 语句表明我们正在使用ES模块，这通常需要一个构建过程来解析。
其余逻辑与CDN方式的字符串模板示例相同。
<script type="module" src="./main.js"></script> 确保浏览器以ES模块的方式加载和执行脚本。

注意事项与应用场景

响应式数据： 在 setup 函数中，必须使用 ref 或 reactive 等组合式API来创建响应式数据。直接声明的普通变量将不会是响应式的。
模板来源： 可以选择将模板直接写在挂载的DOM元素内部，或者作为 template 选项的字符串。字符串模板在逻辑和视图分离方面可能更清晰。
多应用实例： Vue 3允许在同一个页面上创建和挂载多个独立的Vue应用实例，每个实例可以拥有自己的响应式数据和逻辑，互不干扰。这对于在大型非Vue应用中逐步引入Vue功能非常有用。
适用场景：
- 渐进式增强： 在现有遗留项目中，为特定的小区域添加响应式功能，而无需重写整个页面。
- 小型部件/微件： 创建独立的、自包含的交互式UI部件。
- 快速原型开发： 无需复杂的项目结构即可快速验证Vue的功能或概念。
- 教育和演示： 作为Vue入门的简化示例。

总结

尽管Vue 3强调组件化开发，但它依然提供了灵活的机制来创建“无组件”的响应式实例，以适应各种开发需求。通过 createApp 结合 setup 函数，开发者可以像Vue 2时代那样，直接在DOM元素上构建轻量级的、响应式的功能。理解并掌握这种模式，能够帮助开发者更灵活地将Vue集成到不同的项目中，实现高效且优雅的渐进式开发。

以上就是Vue 3 无组件实例：直接在DOM中构建响应式应用的详细内容，更多请关注php中文网其它相关文章！