Vue 3 不使用独立组件文件创建响应式应用实例指南-js教程-PHP中文网

Vue 3 不使用独立组件文件创建响应式应用实例指南

DDD

发布： 2025-11-27 13:22:18

原创

817人浏览过

Vue 3 不使用独立组件文件创建响应式应用实例指南

本文旨在指导如何在 vue 3 中不依赖独立的 `.vue` 组件文件，直接在现有 dom 元素上创建响应式应用实例。我们将探讨通过 cdn 引入和在模块化环境中两种方式，利用 `createapp` api 结合 dom 模板或内联模板，实现类似 vue 2 中直接操作 dom 的简洁响应式开发模式。

在 Vue 2 中，开发者习惯于通过 new Vue({...}) 语法直接将一个 Vue 实例挂载到页面上的某个 DOM 元素，并在此实例中定义数据和方法，从而为该区域添加响应式能力。这种模式在处理小型交互或逐步迁移现有项目时非常方便。Vue 3 引入了 Composition API 和 createApp 函数，其核心理念和实现方式有所不同，但同样提供了不依赖独立组件文件创建响应式实例的能力。

1. Vue 3 的核心变化与等效模式

Vue 3 的应用实例通过 createApp 函数创建，然后调用 .mount() 方法将其挂载到 DOM 元素上。尽管不再是直接 new Vue，但其目标是一致的：为特定的 DOM 区域赋予 Vue 的响应式能力。关键在于，我们可以直接在 createApp 的配置对象中定义组件的逻辑和模板。

2. 通过 CDN 引入 Vue 3 创建实例

当您在不使用构建工具的纯前端项目中工作时，可以通过 CDN 直接引入 Vue 3。

2.1 使用现有 DOM 模板

这种方式将 Vue 实例挂载到页面上已存在的 DOM 元素，并将其内容作为模板。

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

JavaScript 代码:

// CDN Vue 导入
const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    // 使用 ref 创建响应式数据
    const msg = ref("Hello Vue 3!");

    // 返回要在模板中暴露的数据和方法
    return { msg };
  },
}).mount('#app'); // 挂载到 id 为 'app' 的 DOM 元素

登录后复制

HTML 代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 CDN 现有 DOM 模板</title>
  <!-- 引入 Vue 3 的全局构建版本 -->
  <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>
</body>
</html>

登录后复制

说明:

通过 <script src="..."> 标签引入 Vue 3。
createApp 接收一个选项对象，其中 setup 函数是 Composition API 的入口。
ref 函数用于创建响应式引用，其值可以通过 .value 访问。
mount('#app') 将应用挂载到 ID 为 app 的 div 元素上，该 div 内部的 HTML 将作为 Vue 实例的模板。

2.2 使用内联模板

如果您希望 Vue 实例完全控制挂载点的内部结构，可以在 createApp 的选项中直接提供一个 template 字符串。

腾讯混元文生视频

腾讯发布的AI视频生成大模型技术

266

查看详情

JavaScript 代码:

// CDN Vue 导入
const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    const msg = ref("Hello Vue 3 (Inline Template)!");
    return { msg };
  },
  // 提供一个内联模板字符串
  template: `
    <div>{{ msg }}</div>
    <input v-model="msg" />
  `
}).mount('#app'); // 挂载到 id 为 'app' 的 DOM 元素

登录后复制

HTML 代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 CDN 内联模板</title>
  <!-- 引入 Vue 3 的全局构建版本 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
  <div id="app"></div> <!-- 挂载点，其内容将被内联模板替换 -->
</body>
</html>

登录后复制

说明:

与前一种方式不同，挂载点 div#app 可以是空的，因为 template 选项会完全替换其内容。
内联模板通常用于小型、自包含的组件或应用片段。

3. 在模块化环境（CLI/Vite）中创建实例

在现代前端开发中，通常会使用构建工具（如 Vue CLI 或 Vite）来搭建项目。在这种环境下，Vue 模块通过 import 语句引入。

JavaScript 代码 (例如 main.js 或 app.js):

import { createApp, ref } from 'vue';

const app = createApp({
  setup() {
    const msg = ref("Hello Vue 3 (Module Environment)!");
    return { msg };
  },
  // 在模块化环境中，通常也会使用内联模板或导入 .vue 文件
  template: `
    <div>{{ msg }}</div>
    <input v-model="msg" />
  `
}).mount('#app');

登录后复制

HTML 代码 (例如 index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 模块化环境</title>
</head>
<body>
  <div id="app"></div>
  <!-- 构建工具会自动注入打包后的 JavaScript 文件 -->
  <script type="module" src="/src/main.js"></script> 
</body>
</html>

登录后复制

说明:

通过 import { createApp, ref } from 'vue' 导入 Vue 核心功能。
其余逻辑与 CDN 内联模板方式类似。
在构建工具环境中，通常会将 Vue 应用打包成一个或多个 JavaScript 文件，并通过 <script type="module" src="..."> 引入。

4. 注意事项与总结

createApp 是 Vue 3 的入口: 它是创建 Vue 应用实例的唯一方式。
setup 函数: 它是 Composition API 的核心，用于定义组件的响应式状态、计算属性、方法和生命周期钩子。所有需要在模板中访问的数据和方法都必须从 setup 函数中返回。
ref 函数: 在 setup 函数中，ref 是创建响应式数据的主要方式。对于基本类型（字符串、数字、布尔值），ref 会将其包装成一个响应式对象，访问其值需要通过 .value。
模板来源:
- 现有 DOM 模板: 挂载点内部的 HTML 会被 Vue 编译为模板。
- 内联 template 选项: 直接提供一个字符串作为模板，会替换挂载点的内容。
- 单文件组件 (.vue): 这是 Vue 3 推荐的开发方式，但不在本文讨论范围。
适用场景: 这种不依赖独立组件文件的方式非常适合：
- 在现有非 Vue 项目中添加小型的、独立的交互功能。
- 快速原型开发或学习 Vue 3 的基本响应式机制。
- 逐步将旧项目迁移到 Vue 3，每次只转换一小部分。