VueJS - 实例

Vue 3 - 应用实例与根组件

每个 Vue 应用都始于创建一个新的应用实例（application instance），通过 createApp 函数来完成。这个实例是配置和挂载应用的入口点（entry point）。

创建应用实例

在 Vue 3 中，你需要从 vue 包中导入 createApp，并将你的根组件（root component）的选项对象（options object）传递给它。

// main.js（或内联脚本）
import { createApp } from 'vue';

// 定义根组件的选项
const RootComponent = {
  // 选项，例如 data, methods, computed, setup 等
  data() {
    return {
      message: 'Hello from the Root Component!'
    };
  }
};

// 创建应用实例
const app = createApp(RootComponent);

// 将应用实例挂载到 DOM 元素上
app.mount('#app'); // 假设你的 HTML 中存在 <div id="app"></div>

createApp 函数返回应用实例。这个实例为整个应用提供了一个上下文（context），并在挂载（mounting）之前暴露出配置（例如注册组件或插件）的方法。

传递给 createApp 的对象定义了根组件（Root Component）。它是应用组件树中的顶级组件（top-level component）。

根组件的选项

根组件对象可以包含各种选项来定义其状态（state）、行为（behavior）和模板（template）。以下是一些关键选项（使用选项式 API Options API 和组合式 API Composition API 风格演示）：

示例：根组件定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 3 App Instance</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="vue-app">
        <h1>{{ greeting }} {{ name }}!</h1>
        <p>Message from data: {{ message }}</p>
        <p>Computed reversed name: {{ reversedName }}</p>
        <input v-model="name" placeholder="Enter your name">
        <button @click="sayHello">Say Hello (Method)</button>
    </div>

    <script>
        const { createApp, ref, computed } = Vue;

        const app = createApp({
            // --- 组合式 API (Composition API) ---
            setup() {
                // 响应式状态（类似于 Options API 中的 'data'）
                const name = ref('Vue User');
                const message = ref('This is a reactive message.');
                const greeting = 'Welcome'; // 非响应式变量

                // 计算属性
                const reversedName = computed(() => {
                    return name.value.split('').reverse().join('');
                });

                // 方法
                function sayHello() {
                    alert(`Hello, ${name.value}!`);
                }

                // 暴露给模板使用
                return {
                    name,
                    message,
                    greeting,
                    reversedName,
                    sayHello
                };
            },

            // --- 选项式 API (Options API) (在 Vue 3 中仍然有效) ---
            /*
            data() {
                return {
                    name: 'Vue User',
                    message: 'This is a reactive message.',
                    greeting: 'Welcome'
                };
            },
            computed: {
                reversedName() {
                    return this.name.split('').reverse().join('');
                }
            },
            methods: {
                sayHello() {
                    alert(`Hello, ${this.name}!`);
                }
            },
            */
           // 生命周期钩子、组件、指令等也可以在此处定义
           mounted() {
                console.log('App mounted!');
                // 如果 setup 返回对象，可以通过 'this' 访问 Composition API 的状态
                console.log('Initial name:', this.name);
           }
        });

        app.mount('#vue-app');

        // 访问实例数据（现在较少见，主要用于调试）
        // const vm = app.mount('#vue-app');
        // console.log(vm.name); // 访问 Composition API 的 ref
        // console.log(vm.$data.message); // 如果使用的是 Options API data

    </script>
</body>
</html>

关键选项解释

setup() (Composition API): 组合式 API 的入口点。在此定义响应式状态（ref，reactive）、计算属性（computed）、方法（普通函数）和生命周期钩子。返回一个对象，以便将值和函数暴露给模板使用。
data() (Options API): 一个函数，返回包含组件响应式状态的对象。属性可以通过 this 在其他选项中访问，并自动在模板中可用。
methods (Options API): 一个对象，其键是方法名称，值是函数。方法可以通过 this 访问组件实例。
computed (Options API): 一个用于定义计算属性的对象。这些属性基于它们的响应式依赖进行缓存。通过 this 像访问 data 属性一样访问它们。
props: 一个数组或对象，定义组件可以从父组件接收的属性。（更常用于子组件，但理论上也可以用于根组件）。
生命周期钩子（Lifecycle Hooks）: 例如 mounted、created、updated、unmounted 等函数，允许你在组件生命周期的特定阶段执行代码。（在两种 API 中都可用）。
components: 一个对象，用于在当前组件内局部注册子组件。
directives: 一个对象，用于在当前组件内局部注册自定义指令。

模板（`template` 选项或 In-DOM）

组件的模板可以通过几种方式定义：

In-DOM 模板（示例中使用）： 如果 app.mount() 指向的元素（例如 <div id="vue-app">）包含 HTML 内容，Vue 将使用它作为模板。
template 字符串选项： 在组件选项对象中添加 template: '...' 属性，包含 HTML 字符串。
单文件组件（.vue 文件）： 这是在构建设置（build setups）中的标准方法，模板、脚本和样式集中存放（colocated）在一个 .vue 文件中。强烈推荐这种方式以提高可维护性。

多个应用实例

你可以在同一个页面上创建多个独立的 Vue 应用实例，每个实例控制 DOM 的不同部分。这对于 SPA（单页应用）来说不太常见，但对于将 Vue 集成到服务器渲染的页面中可能很有用。

// 应用 1
createApp({ ... }).mount('#app1');

// 应用 2 (独立的)
createApp({ ... }).mount('#app2');

应用配置（`app.component`、`app.directive`、`app.use`）

应用实例（app）提供了全局配置应用的方法，需要在挂载之前调用：

app.component('component-name', ComponentDefinition): 注册一个全局组件。
app.directive('directive-name', DirectiveDefinition): 注册一个全局自定义指令。
app.use(Plugin, options?): 安装一个 Vue 插件（例如 Vue Router 或 Pinia）。

理解应用实例和根组件是构建任何 Vue 应用的第一步。