针对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移除了全局的Vue构造函数，取而代之的是createApp函数。createApp用于创建一个应用实例，该实例可以挂载到DOM中的一个容器元素上。这个应用实例可以不依赖于传统的单文件组件（SFC），而是直接在JavaScript中定义其逻辑和可选的模板。
通过CDN引入Vue 3是快速实现独立响应式实例的最直接方式。
1.1 直接挂载到现有DOM元素（DOM内模板）
立即学习“前端免费学习笔记（深入）”；
这种方式下，Vue应用会接管并编译指定挂载点内部的DOM结构作为其模板。
HTML结构： 首先，在HTML中准备一个作为Vue应用挂载点的DOM元素，并在其中定义初始的UI结构。
<!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>
</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 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>
</body>
</html>在上述示例中，createApp接收一个选项对象，其中setup函数是Composition API的核心。它返回一个对象，该对象中的属性（如msg）将暴露给模板，从而实现数据绑定。mount('#app')指令将Vue应用挂载到id="app"的div元素上，Vue会解析该div内部的HTML作为模板。
1.2 通过template选项定义UI
如果挂载点是一个空的DOM元素，或者希望在JavaScript中完全控制模板内容，可以使用template选项。
HTML结构： 此时，挂载点可以是一个空的div。
<!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>
</head>
<body>
<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 }}</div>
<input v-model="msg" />
`
}).mount('#app');
</script>
</body>
</html>这种方式下，template字符串的内容会替换掉挂载点（#app）的内部HTML。它在挂载点内部没有预设内容时特别有用，或者当你想将模板逻辑完全封装在JavaScript中时。
PHP经典实例（第2版）能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边，大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起，足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中，您可以更加方便地找到各种编程问题的解决方案，《PHP经典实例(第2版)》中内容涵盖了：表单处理；Session管理；数据库交互；使用We
453
在基于构建工具（如Vite、Vue CLI）的项目中，创建独立响应式实例的模式与CDN方式类似，但通常涉及模块导入。
步骤概述：
示例代码：
假设您的项目结构包含一个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文件):
<!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文件 -->
</body>
</html>在CLI项目中，通常不需要手动引入Vue CDN，构建工具会自动处理模块依赖和打包。这种方式使得代码更加模块化，便于管理和维护。
const count = ref(0); // 响应式 let nonReactive = 0; // 非响应式
createApp({ /* ... */ }).mount('#app1');
createApp({ /* ... */ }).mount('#app2');Vue 3通过createApp函数提供了一种灵活且强大的方式来创建独立的响应式应用实例，以适应各种开发场景。无论是通过CDN快速为现有DOM元素添加响应式功能，还是在构建工具环境下以模块化的方式定义应用逻辑和模板，createApp配合setup函数都提供了类似Vue 2 new Vue()的便捷性，同时融入了Composition API的优势。理解并掌握这种模式，能够帮助开发者更有效地利用Vue 3的强大能力。
以上就是Vue 3中独立响应式实例的创建与应用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
146
收藏
