#应用程序 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: 上一次的值,仅仅用在 beforeUpdateupdated中. 无论值是否更改,它都可用。
  • 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

前一个虚拟节点,仅在 beforeUpdateupdated钩子中可用。

注释

除了 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

# 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