diff --git a/src/.vuepress/theme/components/Newsletter.vue b/src/.vuepress/theme/components/Newsletter.vue index ffb3181a..360fa94e 100644 --- a/src/.vuepress/theme/components/Newsletter.vue +++ b/src/.vuepress/theme/components/Newsletter.vue @@ -85,6 +85,7 @@ box-sizing: border-box; border: 1px solid currentColor; appearance: none; + cursor: pointer; } } diff --git a/src/api/global-api.md b/src/api/global-api.md index 5187d0f9..6297d9e4 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -202,7 +202,7 @@ import { defineAsyncComponent } from 'vue' const AsyncComp = defineAsyncComponent({ // ファクトリ関数 - loader: () => import('./Foo.vue') + loader: () => import('./Foo.vue'), // 非同期コンポーネントが読み込み中に使うコンポーネント loadingComponent: LoadingComponent, // 読み込みが失敗したときに使うコンポーネント diff --git a/src/api/options-composition.md b/src/api/options-composition.md index 2817fa77..05c30107 100644 --- a/src/api/options-composition.md +++ b/src/api/options-composition.md @@ -10,11 +10,15 @@ ミックスインフックは提供された順番に呼び出され、コンポーネント自身のフックよりも前に呼び出されます。 + :::info + Vue 2 では、コンポーネントロジックの再利用可能なチャンクを作成するための主要なメカニズムがミックスインでした。Vue 3 では、引き続きミックスインがサポートされていますが、コンポーネント間でコードの再利用するには [Composition API](/guide/composition-api-introduction.html) が推奨されています。 + ::: + - **例:** ```js const mixin = { - created: function() { + created() { console.log(1) } } @@ -34,20 +38,23 @@ ## extends -- **型:** `Object | Function` +- **型:** `Object` - **詳細:** - 別のコンポーネントを宣言的に拡張できます（純粋なオプションオブジェクトまたはコンストラクタのどちらでも）。これは主に単一ファイルコンポーネント間の拡張を簡単にすることを目的としています。 + あるコンポーネントを別のコンポーネントに拡張して、そのコンポーネントオプションを継承することができます。 + + 実装の観点からは、`extends` は `mixins` とほとんど同じです。`extends` で指定されたコンポーネントは、最初のミックスインであるかのように扱われます。 + + しかし、`extends` と `mixins` は異なる意図を表現します。`mixins` オプションは主に機能のチャンクを構成するために使われ、`extends` は主に継承に関係しています。 - これは `mixins` に似ています。 + `mixins` と同様に、どのオプションも関連するマージ戦略を使ってマージされます。 - **例:** ```js const CompA = { ... } - // CompA を `Vue.extend` の呼び出しなしで拡張します const CompB = { extends: CompA, ... diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md index 8ec9217c..1e087c11 100644 --- a/src/guide/migration/custom-directives.md +++ b/src/guide/migration/custom-directives.md @@ -9,6 +9,8 @@ badges: コンポーネントのライフサイクルに合わせて、ディレクティブのフック関数の名称が変更されました。 +加えて、`expression` 文字列は `binding` オブジェクトの一部として渡されなくなりました。 + ## 2.x での構文 Vue 2 では、以下のフックを使用して要素のライフサイクルをターゲットにしたカスタムディレクティブが作成していました。これらはすべてオプションです。 diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md index 98c234be..092719d8 100644 --- a/src/guide/migration/introduction.md +++ b/src/guide/migration/introduction.md @@ -54,7 +54,7 @@ Vue 3 で注目すべきいくつかの新機能の次のとおりです。 - [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 (`