Skip to content

Commit 89c15fe

Browse files
authored
Merge pull request #58 from maxdzin/translate/async-components
2 parents 99b31e5 + f1f8bc1 commit 89c15fe

File tree

1 file changed

+23
-23
lines changed

1 file changed

+23
-23
lines changed

src/uk/breaking-changes/async-components.md

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,27 @@ badges:
33
- new
44
---
55

6-
# Async Components <MigrationBadges :badges="$frontmatter.badges" />
6+
# Асинхронні компоненти <MigrationBadges :badges="$frontmatter.badges" />
77

8-
## Overview
8+
## Огляд
99

10-
Here is a high level overview of what has changed:
10+
Ось короткий огляд того, що змінилося:
1111

12-
- New `defineAsyncComponent` helper method that explicitly defines async components
13-
- `component` option renamed to `loader`
14-
- Loader function does not inherently receive `resolve` and `reject` arguments and must return a Promise
12+
- Новий допоміжний метод `defineAsyncComponent`, який явно визначає асинхронні компоненти
13+
- Опцію `component` перейменовано на `loader`
14+
- Функція завантажувача в сутності не отримує аргументів `resolve` і `reject` і має повертати Promise
1515

16-
For a more in-depth explanation, read on!
16+
Щоб отримати подальші пояснення, читайте далі!
1717

18-
## Introduction
18+
## Вступ
1919

20-
Previously, async components were created by simply defining a component as a function that returned a promise, such as:
20+
Раніше асинхронні компоненти створювали простим визначенням компонента як функції, яка повертала Promise, наприклад:
2121

2222
```js
2323
const asyncModal = () => import('./Modal.vue')
2424
```
2525

26-
Or, for the more advanced component syntax with options:
26+
Або, для більш просунутого синтаксису компонента з опціями:
2727

2828
```js
2929
const asyncModal = {
@@ -35,19 +35,19 @@ const asyncModal = {
3535
}
3636
```
3737

38-
## 3.x Syntax
38+
## Синтаксис 3.x
3939

40-
Now, in Vue 3, since functional components are defined as pure functions, async components definitions need to be explicitly defined by wrapping it in a new `defineAsyncComponent` helper:
40+
Тепер, у Vue 3, оскільки функціональні компоненти визначені як чисті функції, визначення асинхронних компонентів потрібно чітко визначати, обернувши їх у новий хелпер `defineAsyncComponent`:
4141

4242
```js
4343
import { defineAsyncComponent } from 'vue'
4444
import ErrorComponent from './components/ErrorComponent.vue'
4545
import LoadingComponent from './components/LoadingComponent.vue'
4646

47-
// Async component without options
47+
// Асинхронний компонент без опцій
4848
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))
4949

50-
// Async component with options
50+
// Асинхронний компонент із опціями
5151
const asyncModalWithOptions = defineAsyncComponent({
5252
loader: () => import('./Modal.vue'),
5353
delay: 200,
@@ -57,11 +57,11 @@ const asyncModalWithOptions = defineAsyncComponent({
5757
})
5858
```
5959

60-
::: tip NOTE
61-
Vue Router supports a similar mechanism for asynchronously loading route components, known as *lazy loading*. Despite the similarities, this feature is distinct from Vue's support for async components. You should **not** use `defineAsyncComponent` when configuring route components with Vue Router. You can read more about this in the [Lazy Loading Routes](https://router.vuejs.org/guide/advanced/lazy-loading.html) section of the Vue Router documentation.
60+
::: tip Примітка
61+
Vue Router підтримує подібний механізм для асинхронного завантаження маршрутних компонентів, відомий як *відкладене завантаження*. Незважаючи на схожість, ця функція відрізняється від підтримки Vue асинхронних компонентів. Вам **не** слід використовувати `defineAsyncComponent` під час налаштування компонентів маршруту за допомогою Vue Router. Ви можете прочитати більше про це в розділі [Маршрути відкладеного завантаження](https://router.vuejs.org/guide/advanced/lazy-loading.html) документації Vue Router.
6262
:::
6363

64-
Another change that has been made from 2.x is that the `component` option is now renamed to `loader` in order to accurately communicate that a component definition cannot be provided directly.
64+
Ще одна зміна, яка була зроблена порівняно з 2.x, полягає в тому, що опція `component` тепер перейменована на `loader`, щоб точно повідомити, що визначення компонента не можна надати безпосередньо.
6565

6666
```js{4}
6767
import { defineAsyncComponent } from 'vue'
@@ -75,15 +75,15 @@ const asyncModalWithOptions = defineAsyncComponent({
7575
})
7676
```
7777

78-
In addition, unlike 2.x, the loader function no longer receives the `resolve` and `reject` arguments and must always return a Promise.
78+
Крім того, на відміну від 2.x, функція завантажувача більше не отримує аргументи `resolve` і `reject` і має завжди повертати Promise.
7979

8080
```js
81-
// 2.x version
81+
// Версія 2.x
8282
const oldAsyncComponent = (resolve, reject) => {
8383
/* ... */
8484
}
8585

86-
// 3.x version
86+
// Версія 3.x
8787
const asyncComponent = defineAsyncComponent(
8888
() =>
8989
new Promise((resolve, reject) => {
@@ -92,7 +92,7 @@ const asyncComponent = defineAsyncComponent(
9292
)
9393
```
9494

95-
For more information on the usage of async components, see:
95+
Додаткову інформацію про використання асинхронних компонентів дивіться тут:
9696

97-
- [Guide: Async Components](https://vuejs.org/guide/components/async.html)
98-
- [Migration build flag: `COMPONENT_ASYNC`](../migration-build.html#compat-configuration)
97+
- [Посібник: Асинхронні компоненти](https://vuejs.org/guide/components/async.html)
98+
- [Прапор збірки міграції: `COMPONENT_ASYNC`](../migration-build.html#compat-configuration)

0 commit comments

Comments
 (0)