Vue3手册译稿 - 基础 - 应用&组件实例

创建一个应用实例

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

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

应用实例是注册一个可供组件在应用内使用的“全局变量”。我们先看一个快速实例，然后再详细讨论：

const app = Vue.createApp({}) app.component('SearchInput',SearchInputComponent) app.directive('focus',FocusDirective) app.use(LocalePluin) 

应用实例暴露大部分方法，并返回相同的实例，允许使用链式表达式：

Vue.createApp({}) .component('SearchInpu',SearchInputComponent) .directive('focus',FocusDirective) .use(LocalePlugin) 

你可以阅读API参考浏览所有应用API。

根组件

传递给createApp的选项内容被配置为根组件，应用挂载时根组件被用着渲染的起点。

应用需要被挂载到DOM元素，例如，我们需要挂载Vue应用至<div id='app'></div>，我们需要传递#app：

const RootComponent = {
    data() {}, method: {}, component: {} ...... } const app = Vue.createApp(RootComponent) const vm = app.mount("#app") 

不像应用的其他大部分方法都会返回应用实例，mount返回的是根组件的实例。
虽然没有严格的遵守MVVM模型(MVVM即：Model,View,ViewModel架构，有兴趣的可以点链接了解下)，Vue的设计部分还是受到了该模式的启发。根据约定，我们经常使用vm变量名来标识一个根组件实例。
本页面上的示例都只需要一个组件，在真实的应用中，可复用的组件都被规划成一个树形目录。例如，一个ToDo应用的组件目录树可能像这样：

Root Component
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

每个组件都有自己的组件实例，vm。如TodoItem等一些组件，可能在任何时间多个实例被渲染到应用实例中。这个应用中的所有的组件实例都共享同一应用实例。
我们后面会详细讨论组件系统。现在只需要意识到根组件跟其他组件其实没有什么区别。配置项是一样的，组件行为也是一致的。

组件实例属性

早期手册我们遇到了data属性。在data中定义的属性通过组件实例可以暴露出来：

const app =Vue.createApp( { data() { return { count: 4 } } }) const vm = app.mount("#app") console.log(vm.count) // => 4 

有很多不同的组件项可以加入用户自定义属性，如methods、props、computed、inject及setup。我们在本教程中后面会深入讨论这些属性。组件实例中的这些属性无论是怎么定义的，在组件模板中都可以被访问到。
Vue还通过组件实例暴露了一些内置属性，如$attrs,$emit，为了避免与用户自定义属性冲突这些内置属性名都以$打头。

生命周期勾子

每个组件创建时都会按一系步骤进行初始化 -- 举例来说，它需要设置数据监控、编译模板、挂载实例到DOM、当数据发生变化时更新DOM。按这个步骤，它会同时执行一些生命勾子函数，这给用户在不同场景下添加自己代码的机会。

示例，created勾子，可以在实例被创建后执行一些自定义的代码：

Vue.createApp({
    data() { return { count: 1 } }, created() { // `this` 指向的是vm实例本身 console.log('count is :' + this.count) // => count is : 1 } }) 

在不同场景下还有一些不同的勾子，如mounted,updated,unmounted。生命周期勾子的this指向调用它的当前活动实例。

提示
不要在选项属性和回调函数上使用箭头函数，例如created: ()=>console.log(this.a)或vm.$watch('a',newValue=>this.myMethod())，原因是箭头函数没有this，this会被认为任何其他可能对象或会一直向父级范围搜寻到的对象，经常会报Uncaught TypeError: Cannot read property of undefinedorUncaught TypeError: this.myMethod is not a function等错误

生命周期视图

下图是一个实例的生命周期视图。你现在不需要了解所有步骤是怎么动作的，随着你学习和使用的深入，它将会是一个非常有用的参考。