针对vue 2中直接操作dom实现响应式实例的需求，vue 3提供了`createapp`方法。本文将详细阐述如何在不完全依赖组件化封装的情况下，通过cdn引入或cli构建，利用`createapp`配合`setup`函数创建独立的响应式应用实例，并将其挂载到现有dom元素，实现类似vue 2的便捷响应式增强。
在Vue 2中，开发者可以通过new Vue({ el: '#root', data: { ... }, methods: { ... } })的方式，轻松地将响应式能力注入到现有的DOM元素中，这对于快速原型开发或为传统页面局部增强交互性非常方便。Vue 3引入了Composition API和新的应用创建流程，使得这种“无组件”的独立响应式实例创建方式有所变化，但其核心思想和实现依然存在，并更加灵活。
Vue 3中独立响应式实例的核心：createApp
Vue 3移除了全局的Vue构造函数，取而代之的是createApp函数。createApp用于创建一个应用实例，该实例可以挂载到DOM中的一个容器元素上。这个应用实例可以不依赖于传统的单文件组件（SFC），而是直接在JavaScript中定义其逻辑和可选的模板。
1. 使用CDN方式创建独立响应式实例
通过CDN引入Vue 3是快速实现独立响应式实例的最直接方式。
1.1 直接挂载到现有DOM元素（DOM内模板）
这种方式下，Vue应用会接管并编译指定挂载点内部的DOM结构作为其模板。
HTML结构： 首先，在HTML中准备一个作为Vue应用挂载点的DOM元素，并在其中定义初始的UI结构。
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 3 CDN独立实例</title><div id="app">
<div>{{ msg }}</div>
<input v-model="msg">
</div>
<!-- 引入Vue 3 CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script><script>
// Vue 3 应用逻辑
const { createApp, ref } = Vue; // 从全局Vue对象解构出createApp和ref
const app = createApp({
setup() { // setup函数用于定义响应式状态和方法
const msg = ref("hello world"); // 使用ref创建响应式数据
return { msg }; // 返回的数据会暴露给模板
},
}).mount('#app'); // 将应用实例挂载到id为'app'的DOM元素
</script>
在上述示例中，createApp接收一个选项对象，其中setup函数是Composition API的核心。它返回一个对象，该对象中的属性（如msg）将暴露给模板，从而实现数据绑定。mount('#app')指令将Vue应用挂载到id="app"的div元素上，Vue会解析该div内部的HTML作为模板。
1.2 通过template选项定义UI
如果挂载点是一个空的DOM元素，或者希望在JavaScript中完全控制模板内容，可以使用template选项。
HTML结构： 此时，挂载点可以是一个空的div。
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 3 CDN独立实例（带模板）</title><div id="app"></div> <!-- 挂载点可以为空 -->
<!-- 引入Vue 3 CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script><script>
// Vue 3 应用逻辑
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const msg = ref("hello world");
return { msg };
},
template: ` <!-- 使用template选项定义HTML模板字符串 -->
<div>{{ msg }}
<input v-model="msg" />
`
}).mount('#app');
</script>
这种方式下，template字符串的内容会替换掉挂载点（#app）的内部HTML。它在挂载点内部没有预设内容时特别有用，或者当你想将模板逻辑完全封装在JavaScript中时。
2. 使用CLI/构建工具方式创建独立响应式实例
在基于构建工具（如Vite、Vue CLI）的项目中，创建独立响应式实例的模式与CDN方式类似，但通常涉及模块导入。
步骤概述：
- 安装依赖： 确保项目中已安装Vue 3。
- 创建应用： 在JavaScript/TypeScript文件中导入createApp和ref。
- 定义逻辑和模板： 使用setup和template选项。
- 挂载应用： 将应用实例挂载到HTML中的指定DOM元素。
示例代码：
假设您的项目结构包含一个main.js（或index.js）文件和一个index.html文件。
main.js (或入口JS文件):
import { createApp, ref } from 'vue'; // 从'vue'模块导入
// 创建应用实例
const app = createApp({
setup() {
const msg = ref("hello world"); // 使用ref创建响应式数据
return { msg };
},
template: ` // 定义模板字符串
<div>{{ msg }}</div>
<input v-model="msg">
`
});
// 将应用实例挂载到HTML中的指定DOM元素
app.mount('#app');
index.html (或主HTML文件):
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 3 CLI独立实例</title><div id="app"></div> <!-- 挂载点 -->
<!-- 构建工具会自动注入打包后的JS文件 -->
在CLI项目中，通常不需要手动引入Vue CDN，构建工具会自动处理模块依赖和打包。这种方式使得代码更加模块化，便于管理和维护。
注意事项与最佳实践
-
响应式数据声明： 在setup函数中，必须使用ref或reactive来声明响应式数据。直接声明的变量将不会具有响应性。
const count = ref(0); // 响应式 let nonReactive = 0; // 非响应式
- 挂载点： mount方法接收一个CSS选择器或实际的DOM元素作为参数。挂载点的内容将被Vue应用完全控制。如果使用了template选项，template的内容会替换掉挂载点内部的所有HTML。如果未指定template，则挂载点内部的HTML会被视为模板。
-
独立性： 每次调用createApp()都会创建一个完全独立的应用程序实例。这意味着您可以在同一个页面上拥有多个互不干扰的Vue应用实例，每个实例管理其自己的DOM区域和状态。
createApp({ /* ... */ }).mount('#app1'); createApp({ /* ... */ }).mount('#app2'); -
适用场景：
- 快速原型开发： 在没有构建工具的环境下，快速验证Vue特性。
- 为现有非Vue项目添加局部响应式： 在传统的多页面应用中，为特定的DOM区域添加动态交互功能，而无需将整个项目重构为Vue。
- 微前端集成： 在微前端架构中，将一个Vue应用作为子应用嵌入到主应用中。
- 避免滥用： 尽管这种方式提供了灵活性，但对于复杂的、大型的Vue应用，仍然强烈推荐使用单文件组件（SFC）来组织代码。SFC提供了更好的可维护性、组件化和开发体验（例如样式隔离、模板预编译等）。
总结
Vue 3通过createApp函数提供了一种灵活且强大的方式来创建独立的响应式应用实例，以适应各种开发场景。无论是通过CDN快速为现有DOM元素添加响应式功能，还是在构建工具环境下以模块化的方式定义应用逻辑和模板，createApp配合setup函数都提供了类似Vue 2 new Vue()的便捷性，同时融入了Composition API的优势。理解并掌握这种模式，能够帮助开发者更有效地利用Vue 3的强大能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
