本文旨在指导如何在 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。</script>
- createApp 接收一个选项对象，其中 setup 函数是 Composition API 的入口。
- ref 函数用于创建响应式引用，其值可以通过 .value 访问。
- mount('#app') 将应用挂载到 ID 为 app 的 div 元素上，该 div 内部的 HTML 将作为 Vue 实例的模板。
2.2 使用内联模板
如果您希望 Vue 实例完全控制挂载点的内部结构，可以在 createApp 的选项中直接提供一个 template 字符串。
专为中小型企业定制的网络办公软件,富有竞争力的十大特性： 1、独创 web服务器、数据库和应用程序全部自动傻瓜安装，建立企业信息中枢 只需3分钟。 2、客户机无需安装专用软件，使用浏览器即可实现全球办公。 3、集成Internet邮件管理组件，提供web方式的远程邮件服务。 4、集成语音会议组件，节省长途话费开支。 5、集成手机短信组件，重要信息可直接发送到员工手机。 6、集成网络硬
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="..."> 引入。</script>
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，每次只转换一小部分。
通过掌握上述方法，您可以在 Vue 3 中灵活地创建响应式应用实例，无论是直接在浏览器中使用 CDN，还是在现代模块化开发环境中。这为开发者提供了极大的便利性，使其能够根据项目需求选择最合适的开发模式。如需了解更多高级用法，例如多应用实例或更复杂的组件组合，建议查阅 Vue 3 官方文档。
