8000 v2.2アップデートにおけるsrc/v2/api/index.mdの変更の翻訳 (#230) · vuejs/jp.vuejs.org@8df576f · GitHub
[go: up one dir, main page]

Skip to content

Commit 8df576f

Browse files
potato4dkazupon
authored andcommitted
v2.2アップデートにおけるsrc/v2/api/index.mdの変更の翻訳 (#230)
* Production tip周りを翻訳 * Vue.deleteを翻訳 * renderErrorの翻訳 * index.mdの翻訳 * [WIP]Translate/v2.2/index (#1) * 文の区切りがおかしいので修正 * 前置詞のニュアンスを変更 * timelineの訳抜け修正、performance tracingをenableする感じを出した * 誤字修正 * エラー内容 -> エラーに変更。particularlyの訳抜け修正 * Translate/v2.2/index (#2) * primarilyの訳抜けを修正 * allow X to Vの関係がわかるようにした、serve as Xがわかるようにした * feature -> 特徴にした とらえるとよい、というのではなく似てると断言しているが意訳として許容した * プロバイダとなる、とは書いてなかったので消した。無駄な受動態を直した * 長過ぎるので文を切った。keyがローカル名、valueが実名であることを明示した * Allowされるものを明示した。「値の競合」は明示されてないので消した。 value propのならなら残してもいいかもしれない * (2.2.0)が抜けてたので訳した * lintの指摘修正
1 parent 875aa76 commit 8df576f

File tree

1 file changed

+201
-24
lines changed

1 file changed

+201
-24
lines changed

src/v2/api/index.md

Lines changed: 201 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -65,17 +65,21 @@ type: api
6565

6666
- **型:** `Function`
6767

68-
- **デフォルト:** エラーが代わりにスローされます
68+
- **デフォルト:** `undefined`
6969

7070
- **使用方法:**
7171

7272
``` js
73-
Vue.config.errorHandler = function (err, vm) {
73+
Vue.config.errorHandler = function (err, vm, type) {
7474
// エラー処理
75+
// `type` は Vue 固有のエラー種別です(例: どのライフサイクルフックでエラーが起きたかなど)。
76+
// 2.2.0 以降で使用できます。
7577
}
7678
```
7779

78-
コンポーネントの描画とウォッチャいおいて未捕獲のエラーに対してハンドラを割り当てます。ハンドラはエラーと Vue インスタンスが引数に渡されて呼び出されます。
80+
コンポーネントの描画関数とウォッチャにおいて未捕獲のエラーに対してハンドラを割り当てます。ハンドラはエラーと Vue インスタンスが引数に渡されて呼び出されます。
81+
82+
> 2.2.0 では、このフックは、コンポーネントのライフサイクルフック中のエラーも捉えます。また、このフックが `undefined` の場合、捕捉されたエラーは、アプリケーションをクラッシュさせずに、代わりに `console.error` を用いて記録されます。
7983
8084
> このオプションのを使用して、[Sentry](https://sentry.io) というエラー追跡サービスを[公式に統合](https://sentry.io/for/vue/)ために使用します。
8185
@@ -110,11 +114,35 @@ type: api
110114
f1: 112,
111115
mediaPlayPause: 179,
112116
up: [38, 87]
113-
}
117+
}
114118
```
115119

116120
`v-on` 向けにカスタムキーエイリアスを定義します。
117121

122+
## performance
123+
124+
> 2.2.0 の新機能
125+
126+
- **型:** `boolean`
127+
128+
- **デフォルト:** `false`
129+
130+
- **使用方法**:
131+
132+
これを `true` に設定することで、ブラウザの開発者ツールのタイムライン機能で、コンポーネントの初期化やコンパイル、描画、パッチのパフォーマンス追跡することが可能になります。 この機能は、開発者モードおよび [performance.mark](https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark) API をサポートするブラウザでのみ動作します。
133+
134+
### productionTip
135+
136+
> 2.2.0 の新機能
137+
138+
- **型:** `boolean`
139+
140+
- **デフォルト:** `true`
141+
142+
- **使用方法**:
143+
144+
これを `false` に設定すると、 Vue の起動時のプロダクションのヒントが表示されなくなります。
145+
118146
## グローバル API
119147

120148
<h3 id="Vue-extend">Vue.extend( options )</h3>
@@ -197,17 +225,19 @@ type: api
197225
- **参照:** [リアクティブの探求](../guide/reactivity.html)
198226

199227

200-
<h3 id="Vue-delete">Vue.delete( object, key )</h3>
228+
<h3 id="Vue-delete">Vue.delete( target, key )</h3>
201229

202230
- **引数:**
203-
- `{Object} object`
204-
- `{string} key`
231+
- `{Object | Array} target`
232+
- `{string | number} key`
205233

206234
- **使用方法:**
207235

208236
オブジェクトのプロパティを削除します。オブジェクトがリアクティブの場合、削除がトリガし View が更新されることを保証します。これは主に Vue がプロパティの削除を検知できないという制約を回避するために使われますが、使う必要があることはまれです。
209237

210-
**オブジェクトは Vue インスタンス、または Vue インスタンスのルートな data オブジェクトにできないことに注意してください。**
238+
> 2.2.0 以降では、 Array とそのインデックスでも動作します。
239+
240+
<p class="tip">Vue インスタンスや Vue インスタンスのルートデータオブジェクトを対象とすることはできません。</p>
211241

212242
- **参照:** [リアクティブの探求](../guide/reactivity.html)
213243

@@ -340,7 +370,7 @@ type: api
340370

341371
```js
342372
var version = Number(Vue.version.split('.')[0])
343-
373+
344374
if (version === 2) {
345375
// Vue v2.x.x
346376
} else if (version === 1) {
@@ -602,7 +632,7 @@ type: api
602632

603633
### render
604634

605-
- **型:** `Function`
635+
- **型:** `(createElement: () => VNode) => VNode`
606636

607637
- **詳細:**
608638

@@ -613,6 +643,34 @@ type: api
613643
- **参照:**
614644
- [描画関数](../guide/render-function.html)
615645

646+
### renderError
647+
648+
> 2.2.0 からの新機能
649+
650+
- **型:** `(createElement: () => VNode, error: Error) => VNode`
651+
652+
- **詳細:**
653+
654+
**development モードでのみ動作します。**
655+
656+
デフォルトの `render` 関数にてエラーが発生した際に、代替となる描画結果を提供します。この際、エラーは `renderError` へ、第二引数として渡されます。この機能は、特にホットリロードなどと併用する場合に重宝します。
657+
658+
- **例:**
659+
660+
``` js
661+
new Vue({
662+
render (h) {
663+
throw new Error('oops')
664+
},
665+
renderError (h, err) {
666+
return h('pre', { style: { color: 'red' }}, err.stack)
667+
}
668+
}).$mount('#app')
669+
```
670+
671+
- **参照:**
672+
- [描画関数](../guide/render-function)
673+
616674
## オプション / ライフサイクルフック
617675

618676
全てのライフサイクルフックは、データ、算出プロパティ、およびメソッドにアクセスできるようにするために、自動的にインスタンスに束縛する `this` コンテキストを持っています。これは、__ライフサイクルメソッド(例 `created: () => this.fetchTodos()`) を定義するためにアロー関数を使用すべきではないこと__を意味します。アロー関数は、`this` が期待する Vue インスタンスではなく、`this.fetchTodos` が undefined になるため、親コンテキストに束縛できないことが理由です。
@@ -777,7 +835,7 @@ type: api
777835
- **参照:**
778836
- [コンポーネント](../guide/components.html)
779837

780-
## オプション / その他
838+
## オプション / 組成
781839

782840
### parent
783841

@@ -815,18 +873,6 @@ type: api
815873

816874
- **参照:** [ミックスイン](../guide/mixins.html)
817875

818-
### name
819-
820-
- **型:** `string`
821-
822-
- **制約:** コンポーネントのオプションで使われたときのみ、有効なので注意してください。
823-
824-
- **詳細:**
825-
826-
テンプレート内でのコンポーネント自身の再帰呼び出しを許可します。コンポーネントは `Vue.component()` でグローバルに登録され、グローバル ID はその名前に自動的に設定される事に注意してください。
827-
828-
`name` オプションのもう1つの利点は、デバッギングです。名前付きコンポーネントはより便利な警告メッセージが表示されます。また、[vue-devtools](https://github.com/vuejs/vue-devtools) でアプリケーションを検査するとき、名前付きでないコンポーネントは `<AnonymousComponent>` として表示され、とても有益ではありません。`name` オプションの提供によって、はるかに有益なコンポーネントツリーを取得できるでしょう。
829-
830876
### extends
831877

832878
- **型:** `Object | Function`
@@ -849,6 +895,80 @@ type: api
849895
}
850896
```
851897

898+
### provide / inject
899+
900+
> 2.2.0 からの新機能
901+
902+
- **型:**
903+
- **provide:** `Object | () => Object`
904+
- **inject:** `Array<string> | { [key: string]: string | Symbol }`
905+
906+
- **詳細:**
907+
908+
<p class="tip">`provide` および `inject` は、主に高度なプラグインやコンポーネントのライブラリのために提供されています。一般的なアプリケーションのコードで利用することは推奨されません。</p>
909+
910+
この1組のオプションは、コンポーネントの階層がどれほど深いかにかかわらず、祖先コンポーネントが、自身の子孫コンポーネント全てに対する依存オブジェクトの注入役を務めることができるようにするために利用されます。
911+
React に精通している人は、 React のコンテキストの特徴と非常によく似ていると捉えると良いでしょう。
912+
913+
`provide` オプションの値は、オブジェクトもしくはオブジェクトを返す関数でなくてはなりません。
914+
このオブジェクトは自身の子孫に注入可能なプロパティを含みます。また、このオブジェクトのキーとして、 ES2015 の Symbol を利用することが可能です。
915+
916+
`inject` オプションの値は、文字列の配列か、オブジェクトのいずれかでなくてはなりません。オブジェクトの場合、キーがローカルのバインディング名を表し、バリューが利用可能な注入オブジェクトを探すときのキー(文字列または Symbol)となります。
917+
918+
プロバイダとなるコンポーネントは、提供されたプロパティを注入するコンポーネントの親チェーン内にある必要があります。
919+
920+
- **例:**
921+
922+
``` js
923+
var Provider = {
924+
provide: {
925+
foo: 'bar'
926+
},
927+
// ...
928+
}
929+
930+
var Child = {
931+
inject: ['foo'],
932+
created () {
933+
console.log(this.foo) // -> "bar"
934+
}
935+
// ...
936+
}
937+
```
938+
939+
ES2015のシンボルとともに `provide` 関数と `inject` オブジェクトを利用する場合:
940+
941+
``` js
942+
const s = Symbol()
943+
944+
const Provider = {
945+
provide () {
946+
return {
947+
[s]: 'foo'
948+
}
949+
}
950+
}
951+
952+
const Child = {
953+
inject: { s },
954+
// ...
955+
}
956+
```
957+
958+
## オプション / その他
959+
960+
### name
961+
962+
- **型:** `string`
963+
964+
- **制約:** コンポーネントのオプションで使われたときのみ、有効なので注意してください。
965+
966+
- **詳細:**
967+
968+
テンプレート内でのコンポーネント自身の再帰呼び出しを許可します。コンポーネントは `Vue.component()` でグローバルに登録され、グローバル ID はその名前に自動的に設定される事に注意してください。
969+
970+
`name` オプションのもう1つの利点は、デバッギングです。名前付きコンポーネントはより便利な警告メッセージが表示されます。また、[vue-devtools](https://github.com/vuejs/vue-devtools) でアプリケーションを検査するとき、名前付きでないコンポーネントは `<AnonymousComponent>` として表示され、とても有益ではありません。`name` オプションの提供によって、はるかに有益なコンポーネントツリーを取得できるでしょう。
971+
852972
### delimiters
853973

854974
- **型:** `Array<string>`
@@ -879,6 +999,47 @@ type: api
879999

8801000
- **参照:** [関数型コンポーネント](../guide/render-function.html#関数型コンポーネント)
8811001

1002+
### model
1003+
1004+
> 2.2.0 からの新機能
1005+
1006+
- **型:** `{ prop?: string, event?: string }`
1007+
1008+
- **詳細:**
1009+
1010+
`v-model` が指定されたとき、カスタムコンポーネントが prop 及びイベントをカスタマイズすることを許可します。デフォルトでは、コンポーネントにおける `v-model` は、 `value` を prop として、 `input` をイベントして用います。しかし、チェックボックスやラジオボタンなどの入力タイプは、 `value` prop を他の目的で利用したいことがあるかもしれません。その際、 `model` オプションを利用することで、競合を避けることが可能です。
1011+
1012+
- **例:**
1013+
1014+
``` js
1015+
Vue.component('my-checkbox', {
1016+
model: {
1017+
prop: 'checked',
1018+
event: 'change'
1019+
},
1020+
props: {
1021+
// これによって、 `value` prop を別の目的で利用することを許可します。
1022+
value: String
1023+
},
1024+
// ...
1025+
})
1026+
```
1027+
1028+
``` html
1029+
<my-checkbox v-model="foo" value="some value"></my-checkbox>
1030+
```
1031+
1032+
上の例の場合は、こうなります:
1033+
1034+
``` html
1035+
<my-checkbox
1036+
:checked="foo"
1037+
@change="val => { foo = val }"
1038+
value="some value">
1039+
</my-checkbox>
1040+
```
1041+
1042+
8821043
## インスタンスプロパティ
8831044

8841045
### vm.$data
@@ -891,6 +1052,17 @@ type: api
8911052

8921053
- **参照:** [オプション - データ](#data)
8931054

1055+
### vm.$props
1056+
1057+
> 2.2.0 の新機能
1058+
1059+
- **** `Object`
1060+
1061+
- **詳細**
1062+
1063+
コンポーネントが受け取った現在の props を表すオブジェクトです。
1064+
Vue インスタンスプロキシは props オブジェクトのプロパティにアクセスします。
1065+
8941066
### vm.$el
8951067

8961068
- **型:** `HTMLElement`
@@ -1146,7 +1318,7 @@ type: api
11461318
<h3 id="vm-on">vm.$on( event, callback )</h3>
11471319

11481320
- **引数:**
1149-
- `{string} event`
1321+
- `{string | Array<string>} event` (Array は 2.2.0 以降でのみサポートされます)
11501322
- `{Function} callback`
11511323

11521324
- **使用方法:**
@@ -1460,6 +1632,9 @@ type: api
14601632
- `.{keyCode | keyAlias}` - 指定したキーが押された時のみトリガされるハンドラです。
14611633
- `.native` - コンポーネントのルート要素上のネイティブイベントに対して購読します。
14621634
- `.once` - 最大1回、ハンドラをトリガします。
1635+
- `.left` -(2.2.0以降)マウスの左ボタンが押された時のみトリガされるハンドラです。
1636+
- `.right` -(2.2.0以降)マウスの右ボタンが押された時のみトリガされるハンドラです。
1637+
- `.middle` -(2.2.0以降)マウスの中央ボタンが押された時のみトリガされるハンドラです。
14631638

14641639
- **使用方法:**
14651640

@@ -1870,6 +2045,8 @@ type: api
18702045

18712046
コンポーネントが `<keep-alive>` 内部でトグルされるとき、`activated``deactivated` ライフサイクルフックはそれに応じて呼び出されます。
18722047

2048+
> 2.2.0 以降では、`<keep-alive>`ツリーの中の全てのネストされたコンポーネントに対して、 `activated` および `deactived` が発火します。
2049+
18732050
主に、コンポーネント状態を保存したり、再描画を避けるために使用されます。
18742051

18752052
```html

0 commit comments

Comments
 (0)
0