diff --git a/src/guide/migration/data-option.md b/src/guide/migration/data-option.md index 5dd42f06..104f7fff 100644 --- a/src/guide/migration/data-option.md +++ b/src/guide/migration/data-option.md @@ -8,7 +8,9 @@ badges: ## 概要 -`data` コンポーネントオプション宣言はプレーンな JavaScript `object` を受け入れず、`function` 宣言を期待します。 +- **非互換**: `data` コンポーネントオプション宣言はプレーンな JavaScript `object` を受け入れず、`function` 宣言を期待します。 + +- **非互換**: ミックスインや継承で複数の `data` 返り値をマージする場合、マージはディープではなくシャローになりました(ルートレベルのプロパティのみマージされます)。 ## 2.x での構文 @@ -60,9 +62,60 @@ badges: ``` +## ミックスインをマージする挙動の変更 + +このほか、コンポーネントとそのミックスインや継承元の `data()` がマージされる際に、マージは*シャロー*で行われるようになりました。 + +```js +const Mixin = { + data() { + return { + user: { + name: 'Jack', + id: 1 + } + } + } +} + +const CompA = { + mixins: [Mixin], + data() { + return { + user: { + id: 2 + } + } + } +} +``` + +Vue 2.x での `$data` の結果は: + +```json +{ + user: { + id: 2, + name: 'Jack' + } +} +``` + +3.0 では、このような結果に: + +```json +{ + user: { + id: 2 + } +} +``` + ## 移行の戦略 オブジェクト宣言を利用しているユーザーには以下を推奨します: - 共有データを外部オブジェクトとして抽出し、それを `data` のプロパティとして使う - 共有データへの参照、新しい共有オブジェクトを指すようにを書き換える + +ミックスインのディープマージに依存しているユーザーには、そのような依存を完全に避けるためにコードをリファクタリングすることをお勧めします。ミックスインのディープマージは非常に暗黙的であり、コードロジックの理解やデバッグがより難しくなる可能性があります。