diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index aff8c464..48e1db74 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -127,7 +127,8 @@ const sidebar = { 'migration/render-function-api', 'migration/slots-unification', 'migration/transition', - 'migration/v-model' + 'migration/v-model', + 'migration/v-bind' ] }, { diff --git a/src/guide/migration/v-bind.md b/src/guide/migration/v-bind.md new file mode 100644 index 00000000..bb3f83f7 --- /dev/null +++ b/src/guide/migration/v-bind.md @@ -0,0 +1,46 @@ +--- +title: v-bind マージの振る舞い +badges: + - breaking +--- + +# {{ $frontmatter.title }} + +## 概要 + +- **破壊的変更**: v-bind のバインディングの並び順が、レンダリングの結果に影響します。 + +## イントロダクション + +要素に属性を動的にバインドする場合、一般的なシナリオでは、`v-bind="object"` 構文と、同じ要素内にある個別のプロパティの両方を使用します。しかし、これだとマージの優先順位について疑問が残ります。 + +## 2.x での構文 + +Vue 2.x では、要素に `v-bind="object"` 構文と同一の個別のプロパティの両方が定義されている場合、個別のプロパティは常に `object` 内のバインディングを上書きします。 + +```html + +
+ +
+``` + +## 3.x での構文 + +Vue 3.x では、要素に `v-bind="object"` 構文と同一の個別のプロパティの両方が定義されている場合、バインディングの宣言されている順番がそれらをどのようにマージするかを決定します。言い換えると、開発者は個別のプロパティが `object` で定義されているものを常に上書きするのだと決め込むのではなく、希望するマージの振る舞いをコントロールできるようになります。 + +```html + +
+ +
+ + +
+ +
+``` + +## 移行の戦略 + +もしこの上書きの機能を `v-bind` のために利用しているとしたら、`v-bind` 属性が個別のプロパティより前に定義されているか確認することを推奨します。