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。
生命周期图
下面就是组件实例的生命周期,慢慢去理解吧。