# API приложения

Во Vue 3 все API, глобально изменявшие поведение Vue, были перенесены в экземпляры приложения, создаваемые с помощью нового метода createApp. Кроме того, теперь их эффекты ограничены конкретным экземпляром приложения:

import { createApp } from 'vue'

const app = createApp({})

1
2
3

Вызов createApp возвращает экземпляр приложения. Этот экземпляр предоставляет доступ к контексту приложения. Всё дерево компонентов, смонтированных экземпляром приложения, имеет один и тот же контекст, конфигурации которого были «глобальными» во Vue 2.x.

Кроме того, так как метод 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({})

// регистрация
app.directive('my-directive', {
  // Директива имеет набор хуков жизненного цикла:
  // вызывается до привязки атрибутов или слушателей событий к элементу
  created() {},
  // вызывается перед монтированием элемента родительским компонентом
  beforeMount() {},
  // вызывается после монтирования элемента родительским компонентом
  mounted() {},
  // вызывается перед обновлением VNode, содержащего компонента
  beforeUpdate() {},
  // вызывается после того, как VNode содержащего компонента и VNodes его дочерних элементов были обновлены
  updated() {},
  // вызывается перед тем, как родительский компонент элемента будет размонтирован
  beforeUnmount() {},
  // вызывается после того, как родительский компонент элемента размонтирован
  unmounted() {}
})

// регистрация (определение директивы функцией)
app.directive('my-directive', () => {
  // будет вызываться для хуков `mounted` и `updated`
})

// получение, возвращение определения директивы если уже зарегистрирована
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
28
29

Хуки директивы принимают следующие аргументы:

# el

Элемент, к которому привязывается директива. Можно использовать для прямого манипулирования DOM.

# binding

Объект, содержащий следующие свойства:

instance: Экземпляр компонента, где используется директива.
value: Значение, переданное в директиву. Например, для v-my-directive="1 + 1" значение будет 2.
oldValue: Предыдущее значение будет доступно только в хуках beforeUpdate и updated. Свойство будет доступно независимо от того, изменялось ли значение.
arg: Аргумент, передаваемый с директивой (если таковой был указан). Например, для v-my-directive:foo аргумент будет "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

Схема реального DOM-элемента, полученного в качестве аргумента el выше.

# prevNode

Предыдущая виртуальная нода, доступна только в хуках beforeUpdate и updated.

Примечание

Кроме el, следует относиться к этим аргументам как доступным «только для чтения» и никогда не изменять их. При необходимости передачи данных между хуками рекомендуем использовать dataset (opens new window) элемента.

См. также: Пользовательские директивы

# mixin

Аргументы:
- {Object} mixin
Возвращает:
- Экземпляр приложения
Использование:

Добавляет примесь (mixin) ко всей области приложения. После регистрации они могут использоваться в шаблоне любого компонента текущего приложении. Это может быть полезно разработчикам плагинов для добавления собственного пользовательского поведения в компоненты. Не рекомендуется использовать в коде приложения.
См. также: Глобальные примеси

# mount

Аргументы:
- {Element | string} rootContainer
- {boolean} isHydrate (опционально)
Возвращает:
- Экземпляр корневого компонента
Использование:

Для предоставленного DOM-элемента, innerHTML будет заменено на отрисованный шаблон корневого компонента приложения.
Пример:

<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, приложение может рассматриваться как предок на корневом уровне, а корневой компонент — как его единственный дочерний элемент.

Не следует путать этот метод с предоставлением опций компоненту или предоставлением функции в composition API. Хотя они также являются частью того же механизма provide/inject, они используются для конфигурирования значений, предоставляемых компонентов, а не приложением.

Предоставление значений через приложение полезно при разработке плагинов, так как плагины обычно не могут предоставлять значения, используемые компонентами. Это альтернатива использованию globalProperties.

Примечание

Привязки provide и 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

Использование:

Демонтирует корневой компонент экземпляра приложения.
Пример:

<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(), 5000)

1
2
3
4
5
6
7
8

# use

Аргументы:
- {Object | Function} plugin
- ...options (опционально)
Возвращает:
- Экземпляр приложения
Использование:

Установка плагина Vue.js. При передаче объекта он должен содержать метод install. Если передаётся функция, то она рассматривается как метод установки плагина.

Метод установки вызывается с передачей первым аргументом экземпляра приложения. Любые настройки options переданные в use будут в последующих аргументах.

При многократном вызове метода установки одного и того же плагина, установка будет выполнена только один раз.

Пример:

import { createApp } from 'vue'
import MyPlugin from './plugins/MyPlugin'

const app = createApp({})

app.use(MyPlugin)
app.mount('#app')

1
2
3
4
5
6
7

См. также: Плагины

← Конфигурация приложения Глобальное API →