2020年10月

vue3官方的中文文档还没出来。这几天在看vue3官方英文的文档。其实直接读英文文档是比较困难的，多次阅读才能对其表达的意思理解。那么，就从第三篇开始翻译吧。

前提：没有直译，并且认为直译是很 low 的做法。按照自己的理解组织语言，难免会有错误的地方。望不吝赐教。

原文 ： https://v3.vuejs.org/guide/instance.htm

应用实例和组件实例

创建应用实例

每个 Vue 应用都起源于一个 vue 应用实例。可以通过 Vue 库的 createApp 方法创建一个vue应用实例。

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

vue 应用实例会被注册到全局，供此应用内部的组件去调用它。

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

vue应用实例暴露的很多接口都返回其自身，这让我们可以链式地组织代码。

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

根组件

可以给 createApp 传入一个参数来配置根组件，根组件是渲染的起点。

vue应用实例必须挂载于一个 Dom 节点上才能生效。比如我们想把应用实例挂载在<div id="app"></div> 上，可以给 mount 方法传入 #app

const RootComponent = { /* options */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

和vue应用实例的大多数方法不一样，mount 方法不会返回vue应用实例本身，而是返回根组件实例。

vue 在一定程度上受到 mvvm 模式的启发，所以我们一般约定使用 vm（ViewModel的简写） 标识符表示组件实例。

上面例子中，我们写页面只用了一个组件。其实大多数的真实场景是：一个vue应用由许多可复用的组件组成了一个树状的结构。比如 Todo 应用可能会是这种结构：

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

所有的组件都有其自己的实例---vm。对于像 Tode 这种，一次渲染多个组件的应用，在当前应用中，所有的组件都共享同一个应用实例。

后面会详细的介绍组件系统。现在你只需要知道：根组件和其他组件并没有太大区别。配置选项与相应组件实例相同。

组件实例的属性

在手册的开头部分，我们就邂逅了 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钩子，可以在组件创建完成（created）后 运行用户自定义的代码。

Vue.createApp({
  data() {
    return { count: 1 }
  },
  created() {
    // `this` points to the vm instance
    console.log('count is: ' + this.count) // => "count is: 1"
  }
})

还有一些其他的钩子在组件实例生命周期的不同阶段运行，如 mounted,updated,unmounted。这些钩子的this指向当前组件实例的上下文。

注意：
不要使用箭头函数，因为箭头函数本身没有 this，所以在箭头函数中，会把this当作一个变量来对待，在其作用域链上查找 this。

生命周期图

下面就是组件实例的生命周期，慢慢去理解吧。
image