Vue.js

Зовнішній вигляд

На цій сторінці

API додатку ​

createApp() ​

Створює екземпляр додатку.

  • Тип

    ts
    function createApp(rootComponent: Component, rootProps?: object): App

  • Подробиці

    Перший аргумент - кореневий компонент. Другим необов'язковим аргументом є реквізити, які потрібно передати кореневому компоненту.

  • Приклад

    З вбудованим кореневим компонентом:

    js
    import { createApp } from 'vue'

const app = createApp({
  /* параметри кореневого компонента */
})

    З імпортованим компонентом:

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

const app = createApp(App)

  • Див. також Посібник - Створення додатка на Vue

createSSRApp() ​

Створює екземпляр додатка в режимі гідратації SSR. Використання точно таке ж, як createApp().

app.mount() ​

Монтує екземпляр додатка в елемент-контейнер.

  • Тип

    ts
    interface App {
  mount(rootContainer: Element | string): ComponentPublicInstance
}

  • Подробиці

    Аргументом може бути фактичний елемент DOM або селектор CSS (буде використано перший відповідний елемент). Повертає екземпляр кореневого компонента.

    Якщо компонент має шаблон або визначену функцію рендерингу, він замінить будь-які наявні вузли DOM усередині контейнера. В іншому випадку, якщо доступний компілятор під час виконання, innerHTML контейнера буде використано як шаблон.

    У режимі SSR гідратації він гідратує наявні вузли DOM всередині контейнера. Якщо є невідповідності, наявні вузли DOM буде змінено відповідно до очікуваного результату.

    Для кожного екземпляра додатка, mount() можна викликати лише один раз.

  • Приклад

    js
    import { createApp } from 'vue'
const app = createApp(/* ... */)

app.mount('#app')

    Можна також змонтувати на фактичний елемент DOM:

    js
    app.mount(document.body.firstChild)

app.unmount() ​

Демонтує змонтований екземпляр додатка, ініціюючи хуки життєвого циклу демонтування для всіх компонентів у дереві компонентів додатка.

  • Тип

    ts
    interface App {
  unmount(): void
}

app.component() ​

Реєструє глобальний компонент, якщо передається ім’я і визначення компонента, або отримує вже зареєстрований, якщо передається лише ім’я.

  • Тип

    ts
    interface App {
  component(name: string): Component | undefined
  component(name: string, component: Component): this
}

  • Приклад

    js
    import { createApp } from 'vue'

const app = createApp({})

// зареєструвати параметри об'єкта
app.component('my-component', {
  /* ... */
})

// отримати зареєстрований компонент
const MyComponent = app.component('my-component')

  • Також до вашої уваги: Реєстрація компонента

app.directive() ​

Реєструє глобальну користувацьку директиву, якщо передається ім’я і визначення директиви, або отримує вже зареєстровану, якщо передається лише ім’я.

  • Тип

    ts
    interface App {
  directive(name: string): Directive | undefined
  directive(name: string, directive: Directive): this
}

  • Приклад

    js
    import { createApp } from 'vue'

const app = createApp({
  /* ... */
})

// реєстрація (об'єктна директива)
app.directive('my-directive', {
  /* користувацькі хуки директив */
})

// реєстрація (скорочена функція директиви)
app.directive('my-directive', () => {
  /* ... */
})

// отримати зареєстровану директиву
const myDirective = app.directive('my-directive')

  • Також до вашої уваги: Користувацькі директиви

app.use() ​

Встановлює плагін.

  • Тип

    ts
    interface App {
  use(plugin: Plugin, ...options: any[]): this
}

  • Подробиці

    Очікує плагін як перший аргумент і додаткові параметри плагіна як другий аргумент.

    Плагін може бути або об'єктом із методом install(), або просто функцією, яка використовуватиметься як метод install(). Параметри (другий аргумент app.use()) буде передано разом із методом install() плагіна.

    Якщо app.use() викликається для того самого плагіна кілька разів, плагін буде встановлено лише один раз.

  • Приклад

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

const app = createApp({
  /* ... */
})

app.use(MyPlugin)

  • Також до вашої уваги: Плагіни

app.mixin() ​

Застосовує глобальний міксин (в межах додатку). Глобальний міксин застосовує включені параметри до кожного екземпляра компонента в додатку.

Не рекомендується

Міксини підтримуються у Vue 3 головним чином для зворотної сумісності через їх широке використання в бібліотеках екосистем. У коді додатку слід уникати використання міксинів, особливо глобальних міксинів.

Для повторного використання логіки віддайте перевагу композиційним функціям.

  • Тип

    ts
    interface App {
  mixin(mixin: ComponentOptions): this
}

app.provide() ​

Надає значення, яке можна додати до всіх компонентів-нащадків додатка.

  • Тип

    ts
    interface App {
  provide<T>(key: InjectionKey<T> | symbol | string, value: T): this
}

  • Подробиці

    Очікує ключ ін'єкції як перший аргумент, а надане значення як другий. Повертає сам екземпляр додатка.

  • Приклад

    js
    import { createApp } from 'vue'

const app = createApp(/* ... */)

app.provide('message', 'привіт')

    Усередині компонента в додатку:

    js
    import { inject } from 'vue'

export default {
  setup() {
    console.log(inject('message')) // 'привіт'
  }
}
    js
    export default {
  inject: ['message'],
  created() {
    console.log(this.message) // 'привіт'
  }
}

  • Також до вашої уваги:

app.runWithContext() ​

Виконує зворотній виклик з поточним додатком як контекстом ін'єкції.

  • Тип

    ts
    interface App {
  runWithContext<T>(fn: () => T): T
}

  • Подробиці

    Очікує функцію зворотного виклику та запускає зворотний виклик негайно. Під час синхронного виклику функції зворотного виклику, виклики inject() можуть шукати ін'єкції зі значень, наданих поточним застосунком, навіть якщо поточного екземпляра активного компонента немає. Також буде повернуто значення зворотного виклику.

  • Приклад

    js
    import { inject } from 'vue'

app.provide('id', 1)

const injected = app.runWithContext(() => {
  return inject('id')
})

console.log(injected) // 1

app.version ​

Надає версію Vue, у якій було створено додаток. Це корисно в плагінах, де вам може знадобитися умовна логіка на основі різних версій Vue.

  • Тип

    ts
    interface App {
  version: string
}

  • Приклад

    Виконання перевірки версії в плагіні:

    js
    export default {
  install(app) {
    const version = Number(app.version.split('.')[0])
    if (version < 3) {
      console.warn('This plugin requires Vue 3')
    }
  }
}

  • Також до вашої уваги: Глобальний API - версія

app.config ​

Кожен екземпляр додатку надає об’єкт config, який містить налаштування конфігурації для цього додатку. Ви можете змінити його властивості (задокументовані нижче) перед монтуванням додатку.

js
import { createApp } from 'vue'

const app = createApp(/* ... */)

console.log(app.config)

app.config.errorHandler ​

Призначає глобальний обробник для не перехоплених помилок, що виникають в додатку.

  • Тип

    ts
    interface AppConfig {
  errorHandler?: (
    err: unknown,
    instance: ComponentPublicInstance | null,
    // `info` - це інформація про помилку Vue,
    // напр. який хук життєвого циклу викинув помилку
    info: string
  ) => void
}

  • Подробиці

    Обробник помилок отримує три аргументи: помилку, екземпляр компонента, який викликав помилку, та інформаційний рядок із зазначенням типу джерела помилки.

    Він може фіксувати помилки з таких джерел:

    • Рендери компонентів
    • Обробники подій
    • Хуки життєвого циклу
    • функція setup()
    • Спостерігачі
    • Користувацькі хуки директив
    • Перехідні хуки

  • Приклад

    js
    app.config.errorHandler = (err, instance, info) => {
  // обробка помилки, напр. повідомлення в службу
}

app.config.warnHandler ​

Призначає користувацький обробник для попереджень від Vue під час виконання.

  • Тип

    ts
    interface AppConfig {
  warnHandler?: (
    msg: string,
    instance: ComponentPublicInstance | null,
    trace: string
  ) => void
}

  • Подробиці

    Обробник попередження отримує повідомлення попередження як перший аргумент, екземпляр вихідного компонента як другий аргумент і рядок трасування компонента як третій.

    Його можна використовувати для фільтрації конкретних попереджень, щоб зменшити багатослівність консолі. Усі попередження Vue слід розглядати під час розробки, тому це рекомендується лише під час сеансів налагодження, щоб зосередитися на конкретних попередженнях серед багатьох, і слід видалити після завершення налагодження.

    TIP

    Попередження працюють лише під час розробки, тому ця конфігурація ігнорується в робочому режимі.

  • Приклад

    js
    app.config.warnHandler = (msg, instance, trace) => {
  // `trace` — це трасування ієрархії компонентів
}

app.config.performance ​

Встановіть для цього параметра значення true, щоб увімкнути ініціалізацію, компіляцію, рендеринг і відстеження продуктивності компонентів на панелі продуктивності/часової шкали devtool браузера. Працює лише в режимі розробки та в браузерах, які підтримують performance.mark API.

app.config.compilerOptions ​

Налаштовує параметри компілятора під час виконання. Значення, встановлені для цього об'єкта, будуть передані компілятору шаблонів у браузері та впливатимуть на кожен компонент налаштованого додатка. Зауважте, що ви також можете змінити ці параметри для кожного компонента за допомогою параметра compilerOptions.

Важливо

Цей параметр конфігурації враховується лише під час використання повної збірки (тобто окремого vue.js, який може компілювати шаблони у браузері). Якщо ви використовуєте збірку лише під час виконання з налаштуваннями збірки, натомість параметри компілятора потрібно передати в @vue/compiler-dom через конфігурації інструменту збирання.

app.config.compilerOptions.isCustomElement ​

Визначає метод перевірки для розпізнавання власних користувацьких елементів.

  • Тип: (tag: string) => boolean

  • Подробиці

    Має повертати true, якщо тег слід розглядати як рідний користувацький елемент. Для відповідного тегу Vue візуалізує його як нативний елемент замість того, щоб намагатися вирішити його як компонент Vue.

    Власні теги HTML і SVG не потребують зіставлення в цій функції – аналізатор Vue розпізнає їх автоматично.

  • Приклад

    js
    // розглядати всі теги, що починаються з "ion-", як користувацькі елементи
app.config.compilerOptions.isCustomElement = (tag) => {
  return tag.startsWith('ion-')
}

  • Також до вашої уваги: Vue і вебкомпоненти

app.config.compilerOptions.whitespace ​

Коригує поведінку обробки пробілів у шаблоні.

  • Тип: 'condense' | 'preserve'

  • Default: 'condense'

  • Подробиці

    Vue видаляє / ущільнює пробіли в шаблонах, щоб отримати більш ефективний скомпільований результат. Стратегією за замовчуванням є «ущільнення» з такою поведінкою:

    1. Початкові / кінцеві пробіли всередині елемента ущільнюються в один пробіл.
    2. Пробіли між елементами, які містять символи нового рядка, видаляються.
    3. Послідовні пробіли в текстових вузлах ущільнюються в один пробіл.

    Встановлення цього параметра на 'preserve' вимкне (2) і (3).

  • Приклад

    js
    app.config.compilerOptions.whitespace = 'preserve'

app.config.compilerOptions.delimiters ​

Налаштовує роздільники, які використовуються для інтерполяції тексту в шаблоні.

  • Тип: [string, string]

  • За замовчуванням: ['{{', '}}']

  • Подробиці

    Це зазвичай використовується, щоб уникнути конфлікту з серверними фреймворками, які також використовують синтаксис вусів.

  • Приклад

    js
    // Роздільники змінено на ES6 шаблон стилю рядка
app.config.compilerOptions.delimiters = ['${', '}']

app.config.compilerOptions.comments ​

Налаштовує обробку коментарів HTML у шаблонах.

  • Тип: boolean

  • За замовчуванням: false

  • Подробиці

    За замовчуванням Vue видаляє коментарі в продакшні. Якщо встановити для цього параметра значення true, Vue змусить зберігати коментарі навіть у продакшні. Коментарі завжди зберігаються під час розробки. Цей параметр зазвичай використовується, коли Vue використовується з іншими бібліотеками, які покладаються на коментарі HTML.

  • Приклад

    js
    app.config.compilerOptions.comments = true

app.config.globalProperties ​

Об’єкт, який можна використовувати для реєстрації глобальних властивостей, до яких можна отримати доступ з будь-якого екземпляра компонента всередині додатка.

  • Тип

    ts
    interface AppConfig {
  globalProperties: Record<string, any>
}

  • Подробиці

    Це заміна Vue.prototype в Vue 2, якого більше немає у Vue 3. Як і з усім глобальним, цим слід користуватися обережно.

    Якщо глобальна властивість конфліктує з власною властивістю компонента, власна властивість компонента матиме вищий пріоритет.

  • Використання

    js
    app.config.globalProperties.msg = 'привіт'

    Це робить msg доступним у будь-якому шаблоні компонента в додатку, а також у this будь-якого екземпляра компонента:

    js
    export default {
  mounted() {
    console.log(this.msg) // 'привіт'
  }
}

  • Також до вашої уваги: Гід - Доповнення глобальних властивостей

app.config.optionMergeStrategies ​

Об’єкт для визначення стратегій об’єднання для користувацьких параметрів компонента.

  • Тип

    ts
    interface AppConfig {
  optionMergeStrategies: Record<string, OptionMergeFunction>
}

type OptionMergeFunction = (to: unknown, from: unknown) => any

  • Подробиці

    Деякі плагіни / бібліотеки додають підтримку користувацьких параметрів компонентів (шляхом впровадження глобальних міксинів). Для цих параметрів може знадобитися спеціальна логіка об’єднання, коли той самий параметр потрібно «об’єднати» з кількох джерел (наприклад, міксини або успадкування компонентів).

    Функцію стратегії злиття можна зареєструвати для користувацького параметра, призначивши його об'єкту app.config.optionMergeStrategies, використовуючи назву параметра як ключ.

    Функція стратегії злиття отримує значення цього параметра, визначеного в батьківському та дочірньому екземплярах як перший і другий аргумент відповідно.

  • Приклад

    js
    const app = createApp({
  // власний параметр
  msg: 'Vue',
  // параметр з міксину
  mixins: [
    {
      msg: 'привіт '
    }
  ],
  mounted() {
    // об’єднані параметри, представлені в this.$options
    console.log(this.$options.msg)
  }
})

// визначити користувацьку стратегію злиття для`msg`
app.config.optionMergeStrategies.msg = (parent, child) => {
  return (parent || '') + (child || '')
}

app.mount('#app')
// покаже 'привіт Vue'

  • Також до вашої уваги: Екземпляр компонента - $options

Редагувати цю сторінку на GitHub