Skip to content

Migration from Vue 2 > v-model の翻訳を追従 #320

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 10, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/guide/migration/attrs-includes-class-style.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,11 @@ export default {
</label>
```

## 移行方針
## 移行の戦略

`inheritAttrs: false` を使用しているコンポーネントでは、スタイルの適用が意図したとおりに動作することを確認してください。もし以前に `class` や `style` の特別な動作に依存していた場合、これらの属性が別の要素に適用されている可能性があるため、一部の見た目が崩れている可能性があります。

## 関連情報
## 参照

- [関連する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
- [移行ガイド - `$listeners` の削除](./listeners-removed.md)
Expand Down
2 changes: 1 addition & 1 deletion src/guide/migration/children.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ badges:

インスタンスプロパティの `$children` は、Vue 3.0 から削除され、サポートされなくなりました。

## 2.x の構文
## 2.x での構文

2.x では、開発者は `this.$children` を使って、現在のインスタンスの直接の子コンポーネントにアクセスすることができました。

Expand Down
4 changes: 2 additions & 2 deletions src/guide/migration/custom-directives.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ badges:

コンポーネントのライフサイクルに合わせて、ディレクティブのフック関数の名称が変更されました。

## 2.x の文法
## 2.x での構文

Vue 2 では、以下のフックを使用して要素のライフサイクルをターゲットにしたカスタムディレクティブが作成していました。これらはすべてオプションです。

Expand All @@ -35,7 +35,7 @@ Vue.directive('highlight', {

この要素の初期設定では、ディレクティブは値を渡してスタイルをバインドします。値は、アプリケーションにてさまざまな値に更新できます。

## 3.x の文法
## 3.x での構文


ただし、Vue 3 では、カスタムディレクティブ用のよりまとまりのある API を作成しました。Vue 2 では、似たようなイベントにフックしているにもかかわらず、コンポーネントのライフサイクルメソッドとは大きく異なります。これらを次のように統合しました。
Expand Down
6 changes: 3 additions & 3 deletions src/guide/migration/custom-elements-interop.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ badges:

## 概要

- **BREAKING:** タグをカスタム要素として扱うかのチェックは、テンプレートのコンパイル中に実行されるようになりました。そのためランタイム設定ではなくコンパイラオプションで設定する必要があります。
- **BREAKING:** 特別な `is` プロパティの使用は予約済みの `<component>` タグのみに制限されます。
- **NEW:** 新しい `v-is` ディレクティブが追加され、ネイティブ HTML のパース制限を回避するためにネイティブ要素で `is` が使用されていた 2.x のユースケースをサポートするようになりました。
- **破壊的変更:** タグをカスタム要素として扱うかのチェックは、テンプレートのコンパイル中に実行されるようになりました。そのためランタイム設定ではなくコンパイラオプションで設定する必要があります。
- **破壊的変更:** 特別な `is` プロパティの使用は予約済みの `<component>` タグのみに制限されます。
- **新規:** 新しい `v-is` ディレクティブが追加され、ネイティブ HTML のパース制限を回避するためにネイティブ要素で `is` が使用されていた 2.x のユースケースをサポートするようになりました。

## 自主的なカスタム要素

Expand Down
4 changes: 2 additions & 2 deletions src/guide/migration/data-option.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ badges:

## 概要

- **非互換**: `data` コンポーネントオプション宣言はプレーンな JavaScript `object` を受け入れず、`function` 宣言を期待します。
- **破壊的変更**: `data` コンポーネントオプション宣言はプレーンな JavaScript `object` を受け入れず、`function` 宣言を期待します。

- **非互換**: ミックスインや継承で複数の `data` 返り値をマージする場合、マージはディープではなくシャローになりました(ルートレベルのプロパティのみマージされます)。
- **破壊的変更**: ミックスインや継承で複数の `data` 返り値をマージする場合、マージはディープではなくシャローになりました(ルートレベルのプロパティのみマージされます)。

## 2.x での構文

Expand Down
4 changes: 2 additions & 2 deletions src/guide/migration/emits-option.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Vue 2 では、コンポーネントが受け取るプロパティを定義す

詳細については、[この機能の API ドキュメント](../../api/options-data.md#emits)をお読みください。

## 移行方針
## 移行の戦略

各コンポーネントから発行されたすべてのイベントを、 `emits` を使って発行することを強くお勧めします。

Expand Down Expand Up @@ -88,7 +88,7 @@ export default {
1. `click` イベントを適切に宣言する。これは `<my-button>` のイベントハンドラに何らかのロジックを実際に追加する場合で役立ちます。
2. `.native` を追加しなくても、親は簡単にネイティブイベントをリッスンできるので、イベントの再発行を削除します。とにかく明らかにイベントを再発行するだけの場合に適しています。

## 関連情報
## 参照

- [関連する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md)
- [移行ガイド - `.native` 修飾子の削除](./v-on-native-modifier-removed.md)
Expand Down
2 changes: 1 addition & 1 deletion src/guide/migration/filters.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ badges:
</script>
```

## 移行方法
## 移行の戦略

フィルタを使う代わりに、算出プロパティか関数に置き換えることを推奨します。

Expand Down
4 changes: 2 additions & 2 deletions src/guide/migration/functional-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Vue 2 では、関数型コンポーネントには 2 つの主要なユース

その結果、関数型コンポーネントに残った唯一のユースケースは、動的な見出しを作成するためのコンポーネントのようなシンプルなものだけです。それ以外の場合は、通常どおりステートフルコンポーネントを使用することをお勧めします。

## 2.x のシンタックス
## 2.x での構文

`<dynamic-heading>` コンポーネントを使うと、適切な見出し(つまり `h1`, `h2`, `h3` など)のレンダリングを担当するコンポーネントは 2.x では単一ファイルコンポーネントとして次のように記述できました:

Expand Down Expand Up @@ -61,7 +61,7 @@ export default {
</script>
```

## 3.x のシンタックス
## 3.x での構文

### 関数で作られるコンポーネント

Expand Down
2 changes: 1 addition & 1 deletion src/guide/migration/key-attribute.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ badges:

## 概要

- **新着:** Vue が一意の `key` を自動的に生成するようになったため、`v-if`/`v-else`/`v-else-if` 分岐で `key` が不要になりました。
- **新規:** Vue が一意の `key` を自動的に生成するようになったため、`v-if`/`v-else`/`v-else-if` 分岐で `key` が不要になりました。
- **破壊的変更:** 手動で `key` を指定する場合、各分岐は一意の `key` を使用する必要があります。同じ `key` を意図的に使用して分岐を強制的に再利用することはできなくなりました。
- **破壊的変更:** `<template v-for>` における `key` は、(子の要素ではなく)`<template>` タグに配置する必要があります。

Expand Down
2 changes: 1 addition & 1 deletion src/guide/migration/v-if-v-for.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ badges:

## 概要

- **BREAKING**: 二つを同じエレメントで利用している場合、`v-if` は `v-for` より優先されます。
- **破壊的変更**: 二つを同じエレメントで利用している場合、`v-if` は `v-for` より優先されます。

## イントロダクション

Expand Down
5 changes: 3 additions & 2 deletions src/guide/migration/v-model.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ badges:
- プロパティ: `value` -> `modelValue`
- イベント: `input` -> `update:modelValue`
- **破壊的変更:** `v-bind` の `.sync` 修飾子とコンポーネントの `model` オプションは削除され、`v-model` の引数に置き換えられます。
- **追加:** 同じコンポーネントに複数の `v-model` バインディングが可能になりました。
- **追加:** カスタムの `v-model` 修飾子を作成する機能が追加されました。
- **新規:** 同じコンポーネントに複数の `v-model` バインディングが可能になりました。
- **新規:** カスタムの `v-model` 修飾子を作成する機能が追加されました。

さらに詳しく知るために読み進めましょう!

Expand Down Expand Up @@ -173,6 +173,7 @@ this.$emit('update:title', newValue)
props: {
modelValue: String // 以前は `value:String` でした
},
emits: ['update:modelValue'],
methods: {
changePageTitle(title) {
this.$emit('update:modelValue', title) // 以前は `this.$emit('input', title)` でした
Expand Down
2 changes: 1 addition & 1 deletion src/guide/migration/watch.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ badges:

- **破壊的変更**: 配列を監視している場合、コールバックは配列が置き換えられたときにのみ実行します。配列の変更で実行する必要がある場合は、 `deep` オプションを指定する必要があります。

## 3.x の構文
## 3.x での構文

[`watch` オプション](/api/options-data.html#watch) を使って配列を監視する場合、コールバックは配列が置き換えられたときにのみ実行します。言い換えれば、 watch コールバックは配列の変更では実行されなくなります。配列の変更で実行するには、 `deep` オプションを指定する必要があります。

Expand Down