Skip to content

Commit f3ff05d

Browse files
jay-esjay-es
committed
copy
1 parent f6ac62f commit f3ff05d

37 files changed

+3643
-0
lines changed

‎.vitepress/locales/ja.js

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
export default {
2+
vitepressConfig: {
3+
title: 'Vue 3 Migration Guide',
4+
description: 'Guide on migrating from Vue 2 to Vue 3',
5+
lang: 'en-US'
6+
},
7+
themeConfig: {
8+
nav: [
9+
{ text: 'Vue 3 Docs', link: 'https://vuejs.org' },
10+
],
11+
12+
sidebar: [
13+
{
14+
text: 'Guide',
15+
items: [
16+
{ text: 'Overview', link: '/' },
17+
{ text: 'New Recommendations', link: '/recommendations' },
18+
{ text: 'Migration Build', link: '/migration-build' },
19+
{
20+
text: 'Breaking Changes',
21+
link: '/breaking-changes/'
22+
}
23+
]
24+
},
25+
{
26+
text: 'Global API',
27+
items: [
28+
{
29+
text: 'Global API Application Instance',
30+
link: '/breaking-changes/global-api'
31+
},
32+
{
33+
text: 'Global API Treeshaking',
34+
link: '/breaking-changes/global-api-treeshaking'
35+
}
36+
]
37+
},
38+
{
39+
text: 'Template Directives',
40+
items: [
41+
{ text: 'v-model', link: '/breaking-changes/v-model' },
42+
{
43+
text: 'key Usage Change',
44+
link: '/breaking-changes/key-attribute'
45+
},
46+
{
47+
text: 'v-if vs. v-for Precedence',
48+
link: '/breaking-changes/v-if-v-for'
49+
},
50+
{ text: 'v-bind Merge Behavior', link: '/breaking-changes/v-bind' },
51+
{
52+
text: 'v-on.native modifier removed',
53+
link: '/breaking-changes/v-on-native-modifier-removed'
54+
}
55+
]
56+
},
57+
{
58+
text: 'Components',
59+
items: [
60+
{
61+
text: 'Functional Components',
62+
link: '/breaking-changes/functional-components'
63+
},
64+
{
65+
text: 'Async Components',
66+
link: '/breaking-changes/async-components'
67+
},
68+
{ text: 'emits Option', link: '/breaking-changes/emits-option' }
69+
]
70+
},
71+
{
72+
text: 'Render Function',
73+
items: [
74+
{
75+
text: 'Render Function API',
76+
link: '/breaking-changes/render-function-api'
77+
},
78+
{
79+
text: 'Slots Unification',
80+
link: '/breaking-changes/slots-unification'
81+
},
82+
{
83+
text: '$listeners merged into $attrs',
84+
link: '/breaking-changes/listeners-removed'
85+
},
86+
{
87+
text: '$attrs includes class & style',
88+
link: '/breaking-changes/attrs-includes-class-style'
89+
}
90+
]
91+
},
92+
{
93+
text: 'Custom Elements',
94+
items: [
95+
{
96+
text: 'Custom Elements Interop Changes',
97+
link: '/breaking-changes/custom-elements-interop'
98+
}
99+
]
100+
},
101+
{
102+
text: 'Removed APIs',
103+
items: [
104+
{
105+
text: 'v-on keyCode Modifiers',
106+
link: '/breaking-changes/keycode-modifiers'
107+
},
108+
{ text: 'Events API', link: '/breaking-changes/events-api' },
109+
{ text: 'Filters', link: '/breaking-changes/filters' },
110+
{
111+
text: 'inline-template',
112+
link: '/breaking-changes/inline-template-attribute'
113+
},
114+
{ text: '$children', link: '/breaking-changes/children' },
115+
{ text: 'propsData option', link: '/breaking-changes/props-data' }
116+
]
117+
},
118+
{
119+
text: 'Other Minor Changes',
120+
items: [
121+
{
122+
text: 'Attribute Coercion Behavior',
123+
link: '/breaking-changes/attribute-coercion'
124+
},
125+
{
126+
text: 'Custom Directives',
127+
link: '/breaking-changes/custom-directives'
128+
},
129+
{ text: 'Data Option', link: '/breaking-changes/data-option' },
130+
{
131+
text: 'Mount API changes',
132+
link: '/breaking-changes/mount-changes'
133+
},
134+
{
135+
text: 'Props Default Function this Access',
136+
link: '/breaking-changes/props-default-this'
137+
},
138+
{
139+
text: 'Transition Class Change',
140+
link: '/breaking-changes/transition'
141+
},
142+
{
143+
text: 'Transition as Root',
144+
link: '/breaking-changes/transition-as-root'
145+
},
146+
{
147+
text: 'Transition Group Root Element',
148+
link: '/breaking-changes/transition-group'
149+
},
150+
{
151+
text: 'VNode lifecycle events',
152+
link: '/breaking-changes/vnode-lifecycle-events'
153+
},
154+
{ text: 'Watch on Arrays', link: '/breaking-changes/watch' }
155+
]
156+
}
157+
]
158+
}
159+
}

‎src/ja/breaking-changes/async-components.md

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
badges:
3+
- new
4+
---
5+
6+
# Async Components <MigrationBadges :badges="$frontmatter.badges" />
7+
8+
## Overview
9+
10+
Here is a high level overview of what has changed:
11+
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
15+
16+
For a more in-depth explanation, read on!
17+
18+
## Introduction
19+
20+
Previously, async components were created by simply defining a component as a function that returned a promise, such as:
21+
22+
```js
23+
const asyncModal = () => import('./Modal.vue')
24+
```
25+
26+
Or, for the more advanced component syntax with options:
27+
28+
```js
29+
const asyncModal = {
30+
component: () => import('./Modal.vue'),
31+
delay: 200,
32+
timeout: 3000,
33+
error: ErrorComponent,
34+
loading: LoadingComponent
35+
}
36+
```
37+
38+
## 3.x Syntax
39+
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:
41+
42+
```js
43+
import { defineAsyncComponent } from 'vue'
44+
import ErrorComponent from './components/ErrorComponent.vue'
45+
import LoadingComponent from './components/LoadingComponent.vue'
46+
47+
// Async component without options
48+
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))
49+
50+
// Async component with options
51+
const asyncModalWithOptions = defineAsyncComponent({
52+
loader: () => import('./Modal.vue'),
53+
delay: 200,
54+
timeout: 3000,
55+
errorComponent: ErrorComponent,
56+
loadingComponent: LoadingComponent
57+
})
58+
```
59+
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.
62+
:::
63+
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.
65+
66+
```js{4}
67+
import { defineAsyncComponent } from 'vue'
68+
69+
const asyncModalWithOptions = defineAsyncComponent({
70+
loader: () => import('./Modal.vue'),
71+
delay: 200,
72+
timeout: 3000,
73+
errorComponent: ErrorComponent,
74+
loadingComponent: LoadingComponent
75+
})
76+
```
77+
78+
In addition, unlike 2.x, the loader function no longer receives the `resolve` and `reject` arguments and must always return a Promise.
79+
80+
```js
81+
// 2.x version
82+
const oldAsyncComponent = (resolve, reject) => {
83+
/* ... */
84+
}
85+
86+
// 3.x version
87+
const asyncComponent = defineAsyncComponent(
88+
() =>
89+
new Promise((resolve, reject) => {
90+
/* ... */
91+
})
92+
)
93+
```
94+
95+
For more information on the usage of async components, see:
96+
97+
- [Guide: Async Components](https://vuejs.org/guide/components/async.html)
98+
- [Migration build flag: `COMPONENT_ASYNC`](../migration-build.html#compat-configuration)

0 commit comments

Comments
 (0)