diff --git a/src/guide/migration/async-components.md b/src/guide/migration/async-components.md index d587ad51..d7b7aba3 100644 --- a/src/guide/migration/async-components.md +++ b/src/guide/migration/async-components.md @@ -20,14 +20,14 @@ badges: 以前、非同期コンポーネントは Promise を返す関数としてコンポーネントを定義することで、このように簡単に作成されました: ```js -const asyncPage = () => import('./NextPage.vue') +const asyncModal = () => import('./Modal.vue') ``` または、オプション付きのさらに高度なコンポーネント構文として: ```js -const asyncPage = { - component: () => import('./NextPage.vue'), +const asyncModal = { + component: () => import('./Modal.vue'), delay: 200, timeout: 3000, error: ErrorComponent, @@ -45,11 +45,11 @@ import ErrorComponent from './components/ErrorComponent.vue' import LoadingComponent from './components/LoadingComponent.vue' // オプションなしの非同期コンポーネント -const asyncPage = defineAsyncComponent(() => import('./NextPage.vue')) +const asyncModal = defineAsyncComponent(() => import('./Modal.vue')) // オプション付きの非同期コンポーネント -const asyncPageWithOptions = defineAsyncComponent({ - loader: () => import('./NextPage.vue'), +const asyncModalWithOptions = defineAsyncComponent({ + loader: () => import('./Modal.vue'), delay: 200, timeout: 3000, errorComponent: ErrorComponent, @@ -57,13 +57,17 @@ const asyncPageWithOptions = defineAsyncComponent({ }) ``` +::: tip NOTE +Vue Router は *遅延読み込み* と呼ばれるルートコンポーネントを非同期に読み込む似たような仕組みをサポートしています。似てはいますが、この機能は Vue の非同期コンポーネントのサポートとは異なります。 Vue Router でルートコンポーネントを構成するときは、 `defineAsyncComponent` を **使用しない** 必要があります。これについては、 Vue Router のドキュメントの [ルートの遅延読み込み](https://next.router.vuejs.org/guide/advanced/lazy-loading.html) で詳しく説明されています。 +::: + 2.x からなされたもう一つの変更は、直接コンポーネント定義を提供できないことを正確に伝えるために `component` オプションの名前が `loader` に替わったことです。 ```js{4} import { defineAsyncComponent } from 'vue' -const asyncPageWithOptions = defineAsyncComponent({ - loader: () => import('./NextPage.vue'), +const asyncModalWithOptions = defineAsyncComponent({ + loader: () => import('./Modal.vue'), delay: 200, timeout: 3000, errorComponent: ErrorComponent, diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md index a0d6c3f3..5c1b84ba 100644 --- a/src/guide/migration/custom-directives.md +++ b/src/guide/migration/custom-directives.md @@ -86,7 +86,7 @@ app.directive('highlight', { Vue 2 では、コンポーネントインスタンスは `vnode` 引数を使ってアクセスする必要がありました。 -```javascript +```js bind(el, binding, vnode) { const vm = vnode.context } @@ -94,7 +94,7 @@ bind(el, binding, vnode) { Vue 3 では、インスタンスは `binding` の一部になりました。 -```javascript +```js mounted(el, binding, vnode) { const vm = binding.instance } diff --git a/src/guide/migration/filters.md b/src/guide/migration/filters.md index d78a00cc..390de51c 100644 --- a/src/guide/migration/filters.md +++ b/src/guide/migration/filters.md @@ -79,7 +79,7 @@ badges: その代わり、 [globalProperties](../../api/application-config.html#globalproperties) によって、すべてのコンポーネントがグローバルフィルタを利用できるようにすることができます: -```javascript +```js // main.js const app = createApp(App) diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md index 0426bf57..ec16fd96 100644 --- a/src/guide/migration/introduction.md +++ b/src/guide/migration/introduction.md @@ -46,7 +46,7 @@ Vue 3 で注目すべきいくつかの新機能の次のとおりです。 - [Fragments](/guide/migration/fragments.html) - [Emits Component Option](/guide/component-custom-events.html) - カスタムレンダラを作るための [`@vue/runtime-core` の `createRenderer` API](https://github.com/vuejs/vue-next/tree/master/packages/runtime-core) -- [SFC での Composition API の Syntax Sugar (`