#应用程序 API

在vue3中，全部改变vue行为的api，现在移动到新的由 createApp方法创建的应用实例中。另外，它现在的效果仅在特定应用程序实例范围内：

import { createApp } from 'vue'

const app = createApp({})

1
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')

1
2
3
4
5
6
7
8
9
10
11

参考: 基础组件

# config

用法:

包含应用程序配置的一个对象.

示例:

import { createApp } from 'vue'
const app = createApp({})

app.config = {...}

1
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')

1
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()
  }
})

1
2
3
4
5

dir 将是以下对象:

{
  mounted(el) {
    el.focus()
  }
}

1
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>

1
2
3

import { createApp } from 'vue'

const app = createApp({})
// 做一些必要的准备
app.mount('#my-app')

1
2
3
4
5

参考:
- 生命周期图

# provide

参数:
- {string | Symbol} key
- value
返回值:
- 应用程序实例
用法:

设置一个值，可以注入到应用程序到所有的组件。组件将使用 inject接收传入的值。

从 provide/ inject角度来看，应用程序可以被认为是根层的祖先，根组件是其唯一的子集。

这个方法不应该与 provide 组件选项或组合api中的 provide 函数混淆. 而这些也是相同 provide/ inject机制的一部分,它们用于为配置组件提供值，而不是为应用程序提供值。

在编写插件时，通过应用程序提供值特别有用，因为插件通常不能使用组件提供值。它是使用 globalProperties的另一种选择。

注释

provide and inject绑定不是响应式的，这是故意的. 然而,如果你向下传递一个观察对象，对象的属性保持响应式。
示例:

注入一个属性到根组件，该值将由应用程序提供：

import { createApp } from 'vue'

const app = createApp({
  inject: ['user'],
  template: `
    <div>
      {{ user }}
    </div>
  `
})

app.provide('user', 'administrator')

1
2
3
4
5
6
7
8
9
10
11
12

参考:
- Provide / Inject

# unmount

参数:
- {Element | string} rootContainer
用法:

在提供的DOM元素上卸载应用程序实例的根组件。
示例:

<body>
  <div id="my-app"></div>
</body>

1
2
3

import { createApp } from 'vue'

const app = createApp({})
// 做一些必要的准备
app.mount('#my-app')

// 应用程序将在挂在后5秒后卸载
setTimeout(() => app.unmount('#my-app'), 5000)

1
2
3
4
5
6
7
8

# use

参数:
- {Object | Function} plugin
- ...options (optional)
返回值:
- 应用程序实例
用法:

安装一个Vue.js插件，如果这个插件是一个对象，它必须公开一个install方法。如果它是方法本身，它将被认为安装方法。

安装方法将应用程序做为第一个参数，传给use的任何options参数都在后续传递。

当方法被同一个插件多次调用时，插件将仅安装一次。
参考: Plugins