Vue3でv-modelがどう変わったか #Vue.js

はじめに

Vue3になって、v-modelにも少し変更があったようなので、
どう変わったのか動作を確かめてみました。
変更点については、以下を参考にしています。
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0005-replace-v-bind-sync-with-v-model-argument.md
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0011-v-model-api-change.md

変更点

通常の使い方は変わらない

これまで通り、<input>要素に対してのv-modelの使い方は変わらないようです。

<input v-model="name" type="text">

値を受けとるProps名がvalueからmodelValueに変更

Vue2.0だと明示的に指定しない場合はvalueというpropsに対してv-modelの値がバインドされていましたが、
Vue3では、modelValueという名前のpropsに対してバインドされるようになっています。

[Vue2以前]

export default {
  props: {
    value: String //ここにv-modelで渡される値が入る
  }
}

[Vue3]

export default {
  props: {
    modelValue: String //ここにv-modelで渡される値が入る
  }
}

複数のデータをv-modelで同期できるようになる

Vue2.0だとv-modelは子コンポーネントのvaluepropsにバインドされていたため、
v-modelによって子コンポーネントの複数のデータと同期することができなかったのですが、
Vue3では、props名を指定することで複数データの同期ができるようになってます。

ParentForm.vue(親)

<name-input
  v-model:familyName="familyName"
  v-model:givenName="givenName"
></name-input>

NameInput.vue(子)

<div>
  <input :value="givenName" @input="$emit('update:givenName', $event.target.value)" type="text">
  <input :value="familyName" @input="$emit('update:familyName', $event.target.value)" type="text">
</div>

実のところVue2.0でも複数のデータを同期したい場合は、
.syncを使用することで同様のことができました。（※2.3.0以降）

.sync 修飾子 — Vue.js

例えば、名前を入力するコンポーネントがあった場合、
次のような形で、子のプロパティと同期することができました。

ParentForm.vue(親)


<name-input
  :familyName.sync="familyName"
  :givenName.sync="givenName"
></name-input>

NameInput.vue(子)

<div>
  <input :value="givenName" @input="$emit('update:givenName', $event.target.value)" type="text">
  <input :value="familyName" @input="$emit('update:familyName', $event.target.value)" type="text">
</div>

見ての通り子コンポーネント側は変わってないです。
このことから、
今回の変更は、「これまでの.syncをv-modelという名前で使えるようになった」という理解の方が近いと思いました。
※.syncはv-modelと同じ動きになるということで、廃止されています。

最後に

内部的な仕様は変わりつつも、
使う側がその変更を極力意識しなくて済むように
アップデートされていていいなと思いました。
v-modelは便利なので、これからも上手く使っていきたいです。

また、間違いや指摘etcがあれば、是非コメントにお願いします！

追記（2021/03/06）

公式ドキュメントにも分かりやすい説明が記載されているのでリンク貼っておききます。
（日）https://v3.ja.vuejs.org/guide/migration/v-model.html
（英）https://v3-migration.vuejs.org/breaking-changes/v-model.html