在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 选项提供一个字符串形式的模板。
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集成到不同的项目中，实现高效且优雅的渐进式开发。
