Vue.js（2）：应用与组件实例

布满荆棘的人生 2022-09-13 12:29 210阅读 0赞

# 一、创建一个应用实例 #

每个 Vue 应用都是通过用 `createApp` 函数创建一个新的**应用实例**开始的：

const app = Vue.createApp({
      /* 选项 */
    })

该应用实例是用来在应用中注册“全局”组件的。我们会在后面的指南中详细讨论，简单的例子：

// 创建一个Vue应用
        const app = Vue.createApp({});
        // 添加组件
        app.component('SearchInput', SearchInputComponent);
        // 添加指令
        app.directive('focus', FocusDirective);
        // 使用插件
        app.use(LocalePlugin);
        
        // 应用实例暴露的大多数方法都会返回该同一实例，允许链式：
        Vue.createApp({})
            .component('SearchInput', SearchInputComponent)
            .directive('focus', FocusDirective)
            .use(LocalePlugin);

可以在 [API 参考][API]中浏览完整的应用 API。

# 二、根组件 #

传递给 `createApp` 的选项用于配置**根组件**。当我们**挂载**应用时，该组件被用作渲染的起点。

一个应用需要被挂载到一个 DOM 元素中。例如，如果你想把一个 Vue 应用挂载到 `<div id="app"></div>`，应该传入 `#app`：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
    
    <div>
    
    </div>
    
    <div id="app">
    
    </div>
    <script>
        // Vue的选项
        const RootComponent = {
            /* 选项 */
        }
        // 创建Vue
        const app = Vue.createApp(RootComponent)
        // 设置挂载的元素
        const vm = app.mount('#app');
    </script>
    </body>
    </html>

与大多数应用方法不同的是，`mount` 不返回应用本身。相反，它返回的是根组件实例。

虽然没有完全遵循 [MVVM 模型][MVVM]，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 `vm` (ViewModel 的缩写) 这个变量名表示组件实例。

尽管本页面上的所有示例都只需要一个单一的组件就可以，但是大多数的真实应用都是被组织成一个嵌套的、可重用的组件树。举个例子，一个 todo 应用组件树可能是这样的：

Root Component // 根组件
    └─ TodoList // 列表
       ├─ TodoItem // 列表项目
       │  ├─ DeleteTodoButton // 删除按钮
       │  └─ EditTodoButton // 修改按钮
       └─ TodoListFooter   // 列表页脚
          ├─ ClearTodosButton // 清空按钮
          └─ TodoListStatistics // 统计

每个组件将有自己的组件实例 `vm`。对于一些组件，如 `TodoItem`，在任何时候都可能有多个实例渲染。这个应用中的所有组件实例将共享同一个应用实例。

我们会在稍后的[组件基础][Link 1]章节具体展开。不过现在，你只需要明白根组件与其他组件没什么不同，配置选项是一样的，所对应的组件实例行为也是一样的。

# 三、组件实例 property（属性） #

在前面的指南中，我们认识了 `data` property。在 `data` 中定义的 property 是通过组件实例暴露的：

// Vue选项
        const app = Vue.createApp({
            data() { // 设置data属性
                return { count: 4 }
            }
        })
        // 将Vue挂载到元素上，并返回组件实例
        const vm = app.mount('#app')
        // 通过组件实例.data中对应的属性名方式获取对应的值。
        console.log(vm.count) // => 4

还有各种其他的组件选项，可以将用户定义的 property 添加到组件实例中，例如 `methods`，`props`，`computed`，`inject` 和 `setup`。我们将在后面的指南中深入讨论它们。组件实例的所有 property，无论如何定义，都可以在组件的模板中访问。

Vue 还通过组件实例暴露了一些内置 property，如 `$attrs` 和 `$emit`。这些 property 都有一个 `$` 前缀，以避免与用户定义的 property 名冲突。

# 四、生命周期钩子 #

每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做**生命周期钩子**的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 [created][] 钩子可以用来在一个实例被创建之后执行代码：

// Vue选项
        Vue.createApp({
            data() { // 属性
                return { count: 1}
            },
            created() { //created钩子可以用来在该实例被创建之后执行
                // `this` 指向 vm 实例
                console.log('count is: ' + this.count) // => "count is: 1"
            }
        })

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 [mounted][]、[updated][] 和 [unmounted][]。生命周期钩子的 `this` 上下文指向调用它的当前活动实例。

注意，不要在选项 property 或回调上使用[箭头函数][Link 2]，比如 `created: () => console.log(this.a)` 或 `vm.$watch('a', newValue => this.myMethod())`。因为箭头函数并没有 `this`，`this` 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 `Uncaught TypeError: Cannot read property of undefined` 或 `Uncaught TypeError: this.myMethod is not a function` 之类的错误。

# 五、生命周期图示 #

下图展示了实例的生命周期。我们不需要立马弄明白所有的东西，不过随着不断学习和使用，它的参考价值会越来越高。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ri4546L5a2Q_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ri4546L5a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[API]: https://v3.cn.vuejs.org/api/application-api.html
[MVVM]: https://en.wikipedia.org/wiki/Model_View_ViewModel
[Link 1]: https://v3.cn.vuejs.org/guide/component-basics.html
[created]: https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#created
[mounted]: https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#mounted
[updated]: https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#updated
[unmounted]: https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#unmounted
[Link 2]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ri4546L5a2Q_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/dfeab7abdf9146f196fe9e20890eea47.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ri4546L5a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/05ba10276fea4b23bceef03ab36f1982.png