登录
首页 >  文章 >  前端

Vue3响应式实例教程：无组件开发详解

时间：2025-12-14 22:27:50 411浏览 收藏

推广推荐
免费电影APP ➜
支持 PC / 移动端，安全直达

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《Vue3独立响应式实例：无组件开发教程》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

Vue 3 独立响应式实例：无需组件的应用程序构建指南

在 Vue 3 中，创建独立响应式实例的模式已从 Vue 2 的 new Vue() 转向 createApp()。本教程将详细介绍如何使用 createApp() 结合 setup() 函数，在不依赖单文件组件的情况下，为现有 DOM 元素添加响应式功能。无论是通过 CDN 引入 Vue，还是在基于模块打包器的项目中，都能高效地构建轻量级或多实例的 Vue 应用。

Vue 3 独立响应式实例概述

在 Vue 2 中，开发者习惯于通过 new Vue({...}) 构造函数直接创建一个 Vue 实例，并将其挂载到指定的 DOM 元素上，从而为该元素及其内部提供响应式数据和方法。这种模式对于快速原型开发或为现有页面添加局部交互功能非常便捷。

Vue 3 引入了 createApp() 函数作为创建应用实例的入口，并推荐使用组合式 API（Composition API）中的 setup() 函数来组织组件逻辑和响应式状态。虽然 Vue 3 的设计更侧重于单文件组件（SFC），但它依然提供了在不定义完整组件的情况下，创建并挂载响应式应用实例的能力，这与 Vue 2 的独立实例模式异曲同工。

方法一：通过 CDN 引入 Vue 3 构建独立应用

当您希望在现有 HTML 页面中快速添加 Vue 3 的响应式功能，而无需复杂的构建流程时，通过 CDN 引入 Vue 是最直接的方式。

1. 使用 CDN 引入 Vue 3 并挂载到现有 DOM

这种方式下，Vue 实例会接管指定 DOM 元素内部的模板内容。

HTML 结构： 首先，在您的 HTML 文件中引入 Vue 3 的全局构建版本，并准备一个用于挂载 Vue 应用的 DOM 元素。

<!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 示例</title>
</head>
<body>
    <div id="app">
       <div>{{ msg }}</div>
       &lt;input v-model=&quot;msg&quot; /&gt;
    </div>

    <!-- 引入 Vue 3 全局构建版本 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script>
        // Vue 应用逻辑
        const { createApp, ref } = Vue; // 从全局 Vue 对象解构出 createApp 和 ref

        const app = createApp({
          setup() {
            // 使用 ref 创建响应式数据
            const msg = ref("Hello Vue 3!");

            // setup 函数返回的对象会暴露给模板
            return { msg };
          },
        }).mount('#app'); // 将应用挂载到 id 为 'app' 的 DOM 元素
    </script>
</body>
</html>

说明：

  • Vue.global.prod.js 是 Vue 3 的全局构建版本，它会将 createApp 和 ref 等 API 暴露在全局 Vue 对象下。
  • createApp({}) 创建一个应用实例。
  • setup() 函数是组合式 API 的入口点，用于定义组件的响应式状态、计算属性、方法等。
  • ref() 函数用于将原始值包装成一个响应式对象，其值通过 .value 访问，但在模板中可直接使用。
  • .mount('#app') 将创建的应用实例挂载到 #app 元素上，Vue 将会编译并渲染该元素内部的模板。

2. 使用 CDN 引入 Vue 3 并通过 template 选项定义模板

如果您希望将模板内容直接定义在 JavaScript 中，而不是依赖现有的 DOM 结构，可以使用 template 选项。

HTML 结构： 此时，#app 元素只需要作为挂载点，内部无需包含模板内容。

<!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 Template 示例</title>
</head>
<body>
    <div id="app"></div>

    <!-- 引入 Vue 3 全局构建版本 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script>
        const { createApp, ref } = Vue;

        const app = createApp({
          setup() {
            const msg = ref("Hello from Template!");
            return { msg };
          },
          // 使用 template 选项定义模板字符串
          template: `
            <div>{{ msg }}</div>
            &lt;input v-model=&quot;msg&quot; /&gt;
          `
        }).mount('#app');
    </script>
</body>
</html>

说明：

  • template 选项接收一个字符串，该字符串将作为应用的根模板进行渲染。
  • 这种方式的优点是模板与逻辑更紧密地结合，尤其适用于小型、自包含的 Vue 应用片段。

方法二：通过模块打包器（如 Vue CLI, Vite）构建独立应用

在现代前端开发中，通常会使用模块打包器（如 Webpack、Vite）来管理项目依赖、编译代码和优化资源。通过这种方式创建的 Vue 3 应用通常是独立文件，并且可以方便地集成到更大型的项目中。

1. 项目设置（以 Vite 为例）

首先，您需要一个基于 Vue 3 的项目。如果您还没有，可以使用 Vite 快速创建一个：

npm create vite@latest my-vue3-app -- --template vue
cd my-vue3-app
npm install

2. 创建并挂载独立应用实例

在您的项目入口文件（通常是 main.js 或 src/main.js）中，您可以像这样创建并挂载一个独立的 Vue 3 应用实例：

// src/main.js
import { createApp, ref } from 'vue'; // 从 'vue' 模块导入 createApp 和 ref

// 定义一个根组件选项对象
const appOptions = {
  setup() {
    const msg = ref("Hello from Module!");
    return { msg };
  },
  // 同样可以使用 template 选项定义模板
  template: `
    <div>{{ msg }}</div>
    &lt;input v-model=&quot;msg&quot; /&gt;
  `
};

// 创建应用实例并挂载
createApp(appOptions).mount('#app');

HTML 结构： 在 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 Module 示例</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
</body>
</html>

说明：

  • import { createApp, ref } from 'vue' 是 ES 模块语法，用于从 Vue 库中导入所需的 API。
  • 这种方式是 Vue 3 官方推荐的开发模式，它允许您利用现代 JavaScript 的模块化特性，并受益于打包工具带来的性能优化和开发体验提升。
  • 您可以创建多个独立的 Vue 应用实例，并将它们挂载到页面上不同的 DOM 元素上，每个实例都有自己的状态和生命周期，互不干扰。

注意事项与总结

  1. createApp 是新的 new Vue： Vue 3 中，createApp() 函数是创建应用实例的入口。它返回一个应用实例，您可以在其上链式调用 mount() 方法来挂载应用。
  2. setup() 函数： 它是组合式 API 的核心，用于组织响应式状态和逻辑。它在组件实例创建之前执行，并返回一个对象，该对象中的属性和方法将在模板中可用。
  3. ref() 函数： 用于创建响应式数据。对于基本类型（字符串、数字、布尔值），ref 是必需的，它会返回一个响应式对象，其值存储在 .value 属性中。
  4. 模板来源：
    • 如果挂载元素内部已有内容，Vue 会将其作为模板。
    • 如果提供了 template 选项，Vue 将使用该字符串作为模板，忽略挂载元素内部的现有内容。
  5. 多应用实例： Vue 3 允许在同一个页面上创建和挂载多个独立的 Vue 应用实例，每个实例都拥有自己的状态管理和生命周期，这对于构建微前端或页面中包含多个独立小部件的场景非常有用。
  6. 开发与生产： CDN 方式适合快速原型或小型项目。对于大型项目或需要模块化、构建优化的场景，推荐使用基于模块打包器的方式。

通过上述方法，您可以在 Vue 3 中灵活地创建独立响应式实例，无论是快速集成到现有页面，还是构建模块化的前端应用，都能够找到适合的实践方案。

今天关于《Vue3响应式实例教程：无组件开发详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>