#应用程序 API
在vue3中,全部改变vue行为的api,现在移动到新的由
createApp
方法创建的应用实例中。
另外,它现在的效果仅在特定应用程序实例范围内:
import { createApp } from 'vue'
const app = createApp({})
2
3
调用
createApp
返回一个应用实例。
这个实例提供应用上下文,应用实例挂载的全部的组件树共享这些上下文,它提供了以前vue2.x中‘global’的配置。
此外,由于
createApp
方法返回应用实例本身,你可以将其他方法连接到它之后,这些方法可以接下来在本节内容找到。
# component
参数:
{string} name
{Function | Object} definition (可选)
返回值:
-
如果传递了
definition
参数,则为应用实例 -
如果没有传递
definition
参数,则为组件
-
如果传递了
用法:
注册或者检索一个全局组件。 注册同时自动设置组件的
name
为给定的参数name
。示例:
import { createApp } from 'vue'
const app = createApp({})
// 注册一个选项对象
app.component('my-component', {
/* ... */
})
// 检索一个组件
const MyComponent = app.component('my-component')
2
3
4
5
6
7
8
9
10
11
- 参考: 基础组件
# config
- 用法:
包含应用程序配置的一个对象.
- 示例:
import { createApp } from 'vue'
const app = createApp({})
app.config = {...}
2
3
4
- 参考: 应用程序配置
# directive
参数:
{string} name
{Function | Object} definition (可选)
返回值:
-
如果传入了
definition
参数,则为应用实例 -
如果没传入
definition
参数,则为应自定义指令
-
如果传入了
用法:
注册或检索一个全局指令。
示例:
import { createApp } from 'vue'
const app = createApp({})
// register
app.directive('my-directive', {
// 指令有设置一些生命周期钩子:
// 在绑定的元素父组件挂载之前调用
beforeMount() {},
// 当绑定的元素父组件挂载时被调用
mounted() {},
// 在包含了组件VNode更新之前调用
beforeUpdate() {},
// 在包含组件VNode和VNode的子组件更新之后调用
updated() {},
// 在绑定的元素父组件卸载之前调用
beforeUnmount() {},
// 在绑定元素父组件卸载时被调用
unmounted() {}
})
// 注册 (指令函数)
app.directive('my-directive', () => {
// 这将做为`mounted` 和 `updated`被调用
})
// getter, 如果已经注册,则返回定义指令
const myDirective = app.directive('my-directive')
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
指令钩子可以传入以下参数:
# el
指令绑定到的元素,可以直接用来操作DOM.
# binding
一个包含以下属性的对象。
instance
: 使用指令的组件的实例。value
: 传入指令的值.例如,在v-my-directive="1 + 1"
, 中,这个值是2
.oldValue
: 上一次的值,仅仅用在beforeUpdate
和updated
中. 无论值是否更改,它都可用。arg
: 如果有,则传入给指令的参数。例如,在v-my-directive:foo
中,这个‘arg’就是"foo"
.modifiers
: 如果有,则是一个包含修改器的对象。例如,在v-my-directive.foo.bar
中,修改器对象是{ foo: true, bar: true }
.dir
: 是一个对象,当指令注册的时候传入的参数。例如,在下面这个指令中
app.directive('focus', {
mounted(el) {
el.focus()
}
})
2
3
4
5
dir
将是以下对象:
{
mounted(el) {
el.focus()
}
}
2
3
4
5
# vnode
作为el参数接收的实际DOM元素的蓝图。
# prevNode
前一个虚拟节点,仅在
beforeUpdate
和
updated
钩子中可用。
注释
除了
el
之外,你应该视这些参数为只读,并永远不要修改它们。
如果你需要跨钩子分享信息,建议通过元素的
dataset
来实现.
- 参考: 自定义指令
# mixin
参数:
{Object} mixin
返回值:
- 应用程序实例
用法:
在整个应用范围内应用minxin.注册一次之后,它们可以当前程序内的任意模版和组件内引用。 还可以被插件作者用来将自定义行为注入到组件。 不建议在应用代码中使用.
参考: 全局 Mixin
# mount
参数:
{Element | string} rootContainer
{boolean} isHydrate (optional)
返回值:
- 根组件实例
用法:
在提供的DOM元素上挂载应用程序实例的根组件。
示例:
<body>
<div id="my-app"></div>
</body>
2
3
import { createApp } from 'vue'
const app = createApp({})
// 做一些必要的准备
app.mount('#my-app')
2
3
4
5
- 参考:
# provide
参数:
{string | Symbol} key
value
返回值:
- 应用程序实例
用法:
设置一个值,可以注入到应用程序到所有的组件。组件将使用
inject
接收传入的值。从
provide
/inject
角度来看,应用程序可以被认为是根层的祖先,根组件是其唯一的子集。这个方法不应该与 provide 组件选项 或组合api中的 provide 函数 混淆. 而这些也是相同
provide
/inject
机制的一部分,它们用于为配置组件提供值,而不是为应用程序提供值。在编写插件时,通过应用程序提供值特别有用,因为插件通常不能使用组件提供值。它是使用 globalProperties的另一种选择。
注释
provide
andinject
绑定不是响应式的,这是故意的. 然而,如果你向下传递一个观察对象,对象的属性保持响应式。示例:
注入一个属性到根组件,该值将由应用程序提供:
import { createApp } from 'vue'
const app = createApp({
inject: ['user'],
template: `
<div>
{{ user }}
</div>
`
})
app.provide('user', 'administrator')
2
3
4
5
6
7
8
9
10
11
12
- 参考:
# unmount
参数:
{Element | string} rootContainer
用法:
在提供的DOM元素上卸载应用程序实例的根组件。
示例:
<body>
<div id="my-app"></div>
</body>
2
3
import { createApp } from 'vue'
const app = createApp({})
// 做一些必要的准备
app.mount('#my-app')
// 应用程序将在挂在后5秒后卸载
setTimeout(() => app.unmount('#my-app'), 5000)
2
3
4
5
6
7
8
# use
参数:
{Object | Function} plugin
...options (optional)
返回值:
- 应用程序实例
用法:
安装一个Vue.js插件,如果这个插件是一个对象,它必须公开一个
install
方法。 如果它是方法本身,它将被认为安装方法。安装方法将应用程序做为第一个参数, 传给
use
的任何options
参数都在后续传递。当方法被同一个插件多次调用时,插件将仅安装一次。
参考: Plugins