Глобальный API Vue3

Глобальный API Vue3 выглядит следующим образом:

Нет. API и описание Пример
1 createApp()
Создать экземпляр приложения Vue, обычно используемый для клиентского рендеринга.		 const app = createApp(App)
2 createSSRApp()
Создать экземпляр приложения Vue для серверного рендеринга (SSR).		 const app = createSSRApp(App)
3 app.mount()
Смонтировать экземпляр приложения Vue к указанному DOM-элементу.		 app.mount('#app')
4 app.unmount()
Размонтировать экземпляр приложения Vue.		 app.unmount()
5 app.onUnmount()
Зарегистрировать функцию обратного вызова для момента размонтирования приложения.		 app.onUnmount(() => { console.log('App is being unmounted') })
6 app.component()
Зарегистрировать глобальный компонент, позволяя использовать компонент где угодно.		 app.component('MyComponent', MyComponent)
7 app.directive()
Зарегистрировать глобальную директиву, позволяя создавать пользовательские директивы.		 app.directive('focus', { mounted(el) { el.focus() } })
8 app.use()
Установить плагин, который может предоставить приложению дополнительный функционал.		 app.use(SomePlugin)
9 app.mixin()
Зарегистрировать глобальный миксин, предоставляющий общие данные или методы всем компонентам.		 app.mixin({ methods: { globalMethod() { ... } } })
10 app.provide()
Предоставить зависимости всему приложению, обеспечивая общий доступ к данным между компонентами.		 app.provide('key', 'some value')
11 app.runWithContext()
Запустить функцию в контексте приложения Vue, позволяя получить доступ к данным контекста.		 app.runWithContext(() => { console.log('Running inside app context') })
12 app.version
Получить текущий номер версии Vue.		 console.log(app.version)
13 app.config
Получение и установка глобальной конфигурации экземпляра приложения.		 app.config.globalProperties.$myProperty = 'value'
14 app.config.errorHandler
Установить глобальную функцию обработчика ошибок, срабатывающую при возникновении необработанной ошибки в приложении.		 app.config.errorHandler = (err, vm, info) => { console.error(err) }
15 app.config.warnHandler
Установить глобальную функцию обработчика предупреждений для обработки предупреждающих сообщений в приложении.		 app.config.warnHandler = (msg, vm, trace) => { console.warn(msg) }
16 app.config.performance
Включить мониторинг производительности для предоставления данных о производительности рендеринга.		 app.config.performance = true
17 app.config.compilerOptions
Настроить параметры компилятора шаблонов, управляющие поведением компиляции шаблонов.		 app.config.compilerOptions.delimiters = ['[[', ']]']
18 app.config.globalProperties
Установить глобальные свойства, доступные всем компонентам в приложении.		 app.config.globalProperties.$myGlobalProperty = 'value'
19 app.config.optionMergeStrategies
Определить стратегии слияния опций компонентов, управляющие тем, как сливаются опции компонентов.		 app.config.optionMergeStrategies.methods = (parent, child) => { return { ...parent, ...child } }
20 app.config.idPrefix
Установить префикс для идентификаторов экземпляров Vue, по умолчанию — "vue-".		 `app.config.idPrefix = 'myApp-'
21 app.config.throwUnhandledErrorInProduction
Управлять тем, выбрасываются ли необработанные ошибки в производственной среде.		 app.config.throwUnhandledErrorInProduction = false
22 version
Получить текущий номер версии Vue.		 console.log(Vue.version)
23 nextTick()
Выполнить отложенную функцию обратного вызова после завершения обновления DOM; используется для обработки асинхронных обновлений DOM.		 nextTick(() => { console.log('DOM updated') })
24 defineComponent()
Используется для определения компонентов, обеспечивая вывод типов и более простой синтаксис.		 export default defineComponent({ name: 'MyComponent' })
25 defineAsyncComponent()
Определите асинхронные компоненты, которые лениво загружаются при необходимости.		 const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))

API экземпляра приложения

1. createApp()

  • Описание: Создайте экземпляр приложения Vue.

  • Использование: createApp(rootComponent, rootProps)

  • Parameters:

    • rootComponent: Корневой компонент.

    • rootProps(Необязательно): Пропсы, передаваемые корневому компоненту.

Пример

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

2. createSSRApp()

  • Описание: Создайте экземпляр приложения Vue, поддерживающий рендеринг на стороне сервера (SSR).

  • Использование: createSSRApp(rootComponent, rootProps)

  • Parameters:

    • rootComponent: Корневой компонент.

    • rootProps(Необязательно): Пропсы, передаваемые корневому компоненту.

Пример

import { createSSRApp } from 'vue';
import App from './App.vue';

const app = createSSRApp(App);

3. app.mount()

  • Описание: Смонтируйте приложение к DOM-элементу.

  • Использование: app.mount(container)

  • Parameters:

    • container: DOM-элемент или строка селектора.

Пример

app.mount('#app');

4. app.unmount()

  • Описание: Размонтируйте экземпляр приложения.

  • Использование: app.unmount()

Пример

app.unmount();

5. app.onUnmount()

  • Описание: Зарегистрируйте функцию обратного вызова, которая будет вызвана при размонтировании приложения.

  • Использование: app.onUnmount(callback)

  • Parameters:

    • callback: Функция, вызываемая при размонтировании.

Пример

app.onUnmount(() => {
  console.log('Приложение размонтировано');
});

6. app.component()

  • Описание: Зарегистрировать или получить глобальный компонент.

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

    • Регистрация:app.component(name, component)

    • Получение:app.component(name)

  • Parameters:

    • name: Имя компонента.

    • component: Определение компонента.

Пример

app.component('MyComponent', {
  template: '<div>My Component</div>'
});

7. app.directive()

  • Описание: Зарегистрировать или получить глобальную директиву.

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

    • Регистрация:app.directive(name, directive)

    • Получение:app.directive(name)

  • Parameters:

    • name: Имя директивы.

    • directive: Определение директивы.

Пример

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

8. app.use()

  • Описание: Установить плагин.

  • Использование: app.use(plugin, options)

  • Parameters:

    • plugin: Плагин.

    • options(Необязательно): Параметры плагина.

Пример

import MyPlugin from './MyPlugin';
app.use(MyPlugin);

9. app.mixin()

  • Описание: Глобальные параметры миксина.

  • Использование: app.mixin(mixin)

  • Parameters:

    • mixin: Объект миксина.

Пример

app.mixin({
  created() {
    console.log('Глобальный миксин создан');
  }
});

10. app.provide()

  • Описание: Предоставление глобальных зависимостей.

  • Использование: app.provide(key, value)

  • Parameters:

    • key: Имя зависимости.

    • value: Значение зависимости.

Пример

app.provide('theme', 'dark');

11. app.runWithContext()

  • Описание: Запуск функции в текущем контексте приложения.

  • Использование: app.runWithContext(fn)

  • Parameters:

    • fn: Функция для запуска.

Пример

app.runWithContext(() => {
  console.log('Запуск с контекстом приложения');
});

12. app.version

  • Описание: Получить версию Vue.

  • Использование: app.version

Пример

console.log(app.version);

13. app.config

  • Описание: Объект конфигурации приложения.

  • Использование: app.config

Пример

app.config.errorHandler = (err) => {
  console.error(err);
};

14. app.config.errorHandler

  • Описание: Функция глобального обработчика ошибок.

  • Использование: app.config.errorHandler = (err, vm, info) => {}

  • Parameters:

    • err: Объект ошибки.

    • vm: Экземпляр компонента, в котором произошла ошибка.

    • info: Сообщение об ошибке.

Пример

app.config.errorHandler = (err) => {
  console.error('Global error:', err);
};

15. app.config.warnHandler

  • Описание: Функция глобального обработчика предупреждений.

  • Использование: app.config.warnHandler = (msg, vm, trace) => {}

  • Parameters:

    • msg: Предупреждающее сообщение.

    • vm: Экземпляр компонента, в котором возникло предупреждение.

    • trace: Стек предупреждений.

Пример

app.config.warnHandler = (msg) => {
  console.warn('Глобальное предупреждение:', msg);
};

16. app.config.performance

  • Описание: Включение отслеживания производительности.

  • Использование: app.config.performance = true

Пример

app.config.performance = true;

17. app.config.compilerOptions

  • Описание: Настройка параметров компилятора шаблонов.

  • Использование: app.config.compilerOptions = { /* options */ }

Пример

app.config.compilerOptions = { whitespace: 'preserve' };

18. app.config.globalProperties

  • Описание: Добавление глобальных свойств.

  • Использование: app.config.globalProperties[key] = value

Пример

app.config.globalProperties.$myGlobal = 'Hello';

19. app.config.optionMergeStrategies

  • Описание: Пользовательская стратегия объединения опций.

  • Использование: app.config.optionMergeStrategies[key] = strategy

Пример

app.config.optionMergeStrategies.customOption = (parent, child) => {
  return child || parent;
};

20. app.config.idPrefix

  • Описание: Установка префикса ID компонента.

  • Использование: app.config.idPrefix = 'my-app-'

Пример

app.config.idPrefix = 'my-app-';

21. app.config.throwUnhandledErrorInProduction

  • Описание: Выбрасывать необработанные ошибки в производственной среде.

  • Использование: app.config.throwUnhandledErrorInProduction = true

Пример

app.config.throwUnhandledErrorInProduction = true;

Общий API

1. version

  • Описание: Получить версию Vue.

  • Использование: Vue.version

Пример

console.log(Vue.version);

2. nextTick()

  • Описание: Выполнить обратный вызов после завершения следующего цикла обновления DOM.

  • Использование: nextTick(callback)

  • Parameters:

    • callback: Функция обратного вызова.

Пример

import { nextTick } from 'vue';
nextTick(() => {
  console.log('DOM updated');
});

3. defineComponent()

  • Описание: Определить компонент.

  • Использование: defineComponent(options)

  • Parameters:

    • options: Опции компонента.

Пример

import { defineComponent } from 'vue';
const MyComponent = defineComponent({
  template: '<div>My Component</div>'
});

4. defineAsyncComponent()

  • Описание: Определить асинхронный компонент.

  • Использование: defineAsyncComponent(loader)

  • Parameters:

    • loader: Функция асинхронной загрузки.

Пример

import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
  import('./MyComponent.vue')
);
Другие расширения