File tree Expand file tree Collapse file tree 6 files changed +19
-9
lines changed
.vuepress/theme/components Expand file tree Collapse file tree 6 files changed +19
-9
lines changed Original file line number Diff line number Diff line change 8585 box-sizing : border-box ;
8686 border : 1px solid currentColor ;
8787 appearance : none ;
88+ cursor : pointer ;
8889 }
8990}
9091 </style >
Original file line number Diff line number Diff line change @@ -202,7 +202,7 @@ import { defineAsyncComponent } from 'vue'
202202
203203const AsyncComp = defineAsyncComponent ({
204204 // ファクトリ関数
205- loader : () => import (' ./Foo.vue' )
205+ loader : () => import (' ./Foo.vue' ),
206206 // 非同期コンポーネントが読み込み中に使うコンポーネント
207207 loadingComponent: LoadingComponent,
208208 // 読み込みが失敗したときに使うコンポーネント
Original file line number Diff line number Diff line change 1010
1111 ミックスインフックは提供された順番に呼び出され、コンポーネント自身のフックよりも前に呼び出されます。
1212
13+ ::: info
14+ Vue 2 では、コンポーネントロジックの再利用可能なチャンクを作成するための主要なメカニズムがミックスインでした。Vue 3 では、引き続きミックスインがサポートされていますが、コンポーネント間でコードの再利用するには [ Composition API] ( /guide/composition-api-introduction.html ) が推奨されています。
15+ :::
16+
1317- ** 例:**
1418
1519 ``` js
1620 const mixin = {
17- created : function () {
21+ created () {
1822 console .log (1 )
1923 }
2024 }
3438
3539## extends
3640
37- - ** 型:** ` Object | Function `
41+ - ** 型:** ` Object `
3842
3943- ** 詳細:**
4044
41- 別のコンポーネントを宣言的に拡張できます(純粋なオプションオブジェクトまたはコンストラクタのどちらでも)。これは主に単一ファイルコンポーネント間の拡張を簡単にすることを目的としています。
45+ あるコンポーネントを別のコンポーネントに拡張して、そのコンポーネントオプションを継承することができます。
46+
47+ 実装の観点からは、` extends ` は ` mixins ` とほとんど同じです。` extends ` で指定されたコンポーネントは、最初のミックスインであるかのように扱われます。
48+
49+ しかし、` extends ` と ` mixins ` は異なる意図を表現します。` mixins ` オプションは主に機能のチャンクを構成するために使われ、` extends ` は主に継承に関係しています。
4250
43- これは ` mixins ` に似ています 。
51+ ` mixins ` と同様に、どのオプションも関連するマージ戦略を使ってマージされます 。
4452
4553- ** 例:**
4654
4755 ``` js
4856 const CompA = { ... }
4957
50- // CompA を `Vue.extend` の呼び出しなしで拡張します
5158 const CompB = {
5259 extends: CompA,
5360 ...
Original file line number Diff line number Diff line change 99
1010コンポーネントのライフサイクルに合わせて、ディレクティブのフック関数の名称が変更されました。
1111
12+ 加えて、` expression ` 文字列は ` binding ` オブジェクトの一部として渡されなくなりました。
13+
1214## 2.x での構文
1315
1416Vue 2 では、以下のフックを使用して要素のライフサイクルをターゲットにしたカスタムディレクティブが作成していました。これらはすべてオプションです。
Original file line number Diff line number Diff line change @@ -54,7 +54,7 @@ Vue 3 で注目すべきいくつかの新機能の次のとおりです。
5454- [ Emits Component Option] ( /guide/component-custom-events.html )
5555- カスタムレンダラを作るための [ ` @vue/runtime-core ` の ` createRenderer ` API] ( https://github.com/vuejs/vue-next/tree/master/packages/runtime-core )
5656- [ SFC での Composition API の Syntax Sugar (` <script setup> ` )] ( https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md ) <Badge text =" experimental " type =" warning " />
57- - [ SFC でのステートドリブンな CSS Variables (` <style> ` の ` v-bind ` )] ( https://github.com/vuejs/rfcs/blob/style-vars-2 /active-rfcs/0000 -sfc-style-variables.md ) <Badge text =" experimental " type =" warning " />
57+ - [ SFC でのステートドリブンな CSS Variables (` <style> ` の ` v-bind ` )] ( https://github.com/vuejs/rfcs/blob/master /active-rfcs/0043 -sfc-style-variables.md ) <Badge text =" experimental " type =" warning " />
5858- [ SFC での ` <style scoped> ` は、グローバルルールまたはスロットされたコンテンツのみを対象とするルールを含めることができるようになった] ( https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md )
5959- [ Suspense] ( /guide/migration/suspense.html ) <Badge text =" experimental " type =" warning " />
6060
@@ -100,7 +100,7 @@ Vue 3 で注目すべきいくつかの新機能の次のとおりです。
100100- ` destroyed ` ライフサイクルオプションの名前が ` unmounted ` に変更されました
101101- ` beforeDestroy ` ライフサイクルオプションの名前が ` beforeUnmount ` に変更されました
102102- [ Props の ` default ` ファクトリ関数は ` this ` コンテキストにアクセスできなくなりました] ( /guide/migration/props-default-this.html )
103- - [ コンポーネントライフサイクルに合わせてカスタムディレクティブ API が変更されました ] ( /guide/migration/custom-directives.html )
103+ - [ コンポーネントライフサイクルに合わせてカスタムディレクティブ API が変更され、 ` binding.expression ` が削除されました ] ( /guide/migration/custom-directives.html )
104104- [ ` data ` オプションは常に関数として宣言されることが必要になりました] ( /guide/migration/data-option.html )
105105- [ ミックスインの ` data ` オプションは浅くマージされるようになりました] ( /guide/migration/data-option.html#mixin-merge-behavior-change )
106106- [ 属性強制の戦略が変更されました] ( /guide/migration/attribute-coercion.html )
Original file line number Diff line number Diff line change @@ -92,7 +92,7 @@ touch rollup.config.js
9292
9393``` js
9494// サードパーティのプラグインをインポート
95- import commonjs from ' rollup- plugin-commonjs'
95+ import commonjs from ' @ rollup/ plugin-commonjs'
9696import VuePlugin from ' rollup-plugin-vue'
9797import pkg from ' ./package.json' // 名前を再利用するために package.json ファイルをインポート
9898
You can’t perform that action at this time.
0 commit comments