vue 3提供了一种灵活的方式来创建独立的响应式实例，无需完整的组件结构，类似于vue 2的`new vue()`模式。通过`createapp`函数，无论是通过cdn引入还是在模块化项目中，开发者都可以轻松地将响应式数据和方法绑定到现有dom元素上，实现局部交互性增强，这对于在传统项目中渐进式地引入vue功能尤其有用。
在Vue 2中，开发者习惯于使用new Vue()直接创建一个实例并将其挂载到DOM元素上，从而为该元素及其子孙元素添加响应式能力。这种模式在将Vue集成到现有项目中或处理小型、局部响应式需求时非常高效。Vue 3虽然引入了组件API优先的设计理念，但依然提供了等效的机制，允许开发者创建独立的、非组件文件的响应式应用实例。本文将详细介绍如何在Vue 3中实现这一目标。
Vue 3中独立实例的核心概念
Vue 3通过createApp函数来创建应用实例。这个函数返回一个应用实例，该实例拥有一个mount方法，用于将应用挂载到DOM元素上。与Vue 2不同的是，Vue 3的应用实例不再直接接受data、methods等选项，而是通过setup函数来定义响应式状态和逻辑。
1. 使用CDN方式创建独立实例
通过CDN引入Vue 3是快速在现有HTML页面中添加响应式功能的常用方法。
1.1 HTML中定义模板
这种方式下，HTML页面中预先定义了应用将要控制的DOM结构，Vue实例会接管这部分结构。
立即学习“前端免费学习笔记（深入）”；
HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 CDN App</title>
</head>
<body>
<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 应用逻辑
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const msg = ref("Hello Vue 3!"); // 定义响应式数据
return { msg }; // 暴露给模板使用
},
}).mount('#app'); // 挂载到ID为'app'的元素
</script>
</body>
</html>在上述示例中：
- 我们通过<script>标签引入了Vue 3的全局构建版本。
- createApp函数被调用，并传入一个配置对象。
- setup()函数是Vue 3组合式API的入口，在这里我们使用ref创建了一个响应式变量msg。
- setup()函数返回的对象（{ msg }）中的属性会暴露给模板使用。
- 最后，.mount('#app')将这个应用实例挂载到HTML中id="app"的div元素上。
1.2 JavaScript中定义模板
如果希望将模板逻辑也完全封装在JavaScript中，可以使用template选项。
HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 CDN App with JS Template</title>
</head>
<body>
<div id="app"></div> <!-- 仅作为挂载点 -->
<!-- 引入Vue 3 CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
// Vue 应用逻辑
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const msg = ref("Hello Vue 3 from JS Template!");
return { msg };
},
// 在JavaScript中定义模板字符串
template: `
<div>{{ msg }}</div>
<input v-model="msg" />
`
}).mount('#app');
</script>
</body>
</html>这种方式下，HTML中的div#app仅作为一个挂载点，实际的UI结构由JavaScript中的template字符串提供。
2. 使用CLI/模块化方式创建独立实例
在基于构建工具（如Vite、Webpack）的Vue项目中，也可以创建不依赖于.vue单文件组件的独立实例。这通常用于将Vue功能嵌入到大型非Vue框架项目中，或在同一页面上运行多个独立的Vue应用。
项目设置（假设已通过Vue CLI或Vite创建了项目）：
// 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'); // 挂载到ID为'app'的元素对应的HTML文件（通常是public/index.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 CLI App</title>
</head>
<body>
<div id="app"></div> <!-- 挂载点 -->
<script type="module" src="/src/main.js"></script> <!-- 入口文件 -->
</body>
</html>在这种模式下，import { createApp, ref } from 'vue'从Vue模块中导入必要的函数。template选项同样用于定义UI结构。构建工具会自动处理模块依赖和打包。
注意事项与最佳实践
-
createApp与new Vue()的对比：
- new Vue()在Vue 2中创建的是一个根实例，所有组件都基于此。
- createApp在Vue 3中创建的是一个应用实例。Vue 3支持在同一个页面上创建并挂载多个独立的createApp应用实例，每个实例都有自己的状态、插件和全局配置，互不影响。这在集成到微前端或大型遗留系统时非常有用。
- setup函数： 它是组合式API的核心。所有响应式状态（ref, reactive）、计算属性（computed）、侦听器（watch）和生命周期钩子都应在setup中定义。setup函数返回一个对象，该对象中的属性和方法将暴露给模板使用。
- ref和reactive： 在setup函数中，使用ref来创建基本类型（字符串、数字、布尔值）和对象类型的响应式引用。对于复杂对象，也可以使用reactive。
- 模板解析： 当使用CDN且模板在HTML中时，Vue会直接解析DOM。当使用template选项时，Vue会解析字符串模板。确保模板字符串是有效的HTML结构。
- 性能考量： 对于大型复杂应用，推荐使用.vue单文件组件，因为它提供了更好的组织性、开发体验和构建优化。独立实例模式更适合于局部增强或渐进式集成。
- 错误处理： 独立实例同样可以利用Vue的错误处理机制，例如通过app.config.errorHandler配置全局错误捕获。
总结
Vue 3通过createApp函数提供了灵活的方式来创建独立的响应式应用实例，以满足在不同场景下的开发需求。无论是通过CDN快速为现有页面添加交互性，还是在模块化项目中嵌入局部Vue功能，这种非组件式的实例创建方法都提供了一个强大而简洁的解决方案。理解createApp、setup和mount的工作原理，是有效利用Vue 3进行渐进式开发的关键。
