Vue 3 不使用独立组件文件创建响应式应用实例指南_技术教程

本文旨在指导如何在 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 代码:




  
  Vue 3 CDN 现有 DOM 模板
  
  


  
    {{ msg }}

说明:

通过
createApp 接收一个选项对象，其中 setup 函数是 Composition API 的入口。
ref 函数用于创建响应式引用，其值可以通过 .value 访问。
mount('#app') 将应用挂载到 ID 为 app 的 div 元素上，该 div 内部的 HTML 将作为 Vue 实例的模板。

2.2 使用内联模板

如果您希望 Vue 实例完全控制挂载点的内部结构，可以在 createApp 的选项中直接提供一个 template 字符串。

JavaScript 代码:

// CDN Vue 导入
const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    const msg = ref("Hello Vue 3 (Inline Template)!");
    return { msg };
  },
  // 提供一个内联模板字符串
  template: `
    {{ msg }}
    
  `
}).mount('#app'); // 挂载到 id 为 'app' 的 DOM 元素

HTML 代码:




  
  Vue 3 CDN 内联模板

说明:

与前一种方式不同，挂载点 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: `
    {{ msg }}
    
  `
}).mount('#app');

HTML 代码 (例如 index.html):




  
  Vue 3 模块化环境

说明:

通过 import { createApp, ref } from 'vue' 导入 Vue 核心功能。
其余逻辑与 CDN 内联模板方式类似。
在构建工具环境中，通常会将 Vue 应用打包成一个或多个 JavaScript 文件，并通过

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，每次只转换一小部分。