Vue.js における v-model と model-value の違い

Vue.js の v-model と model-value は、いずれもフォームデータの双方向バインディングを実現するために使用されるディレクティブです。

v-model は Vue.js が提供するシンタックスシュガーで、テンプレート内でフォームデータの双方向バインディングをより簡単に実現できます。フォーム要素で v-model を使用すると、要素の input または change イベントを自動的に監視し、フォーム要素の値を対応する Vue コンポーネントのデータと同期します。また、その逆も行われます。例：

<input v-model="message" />

これにより、フォーム要素の値と Vue インスタンス内の message データが双方向にバインディングされます。ユーザーがフォーム要素に値を入力すると、message データが自動的に更新されます。message データに変更があると、フォーム要素の値も自動的に更新されます。

model-value は Vue 3 で新たに追加された属性で、カスタムコンポーネント内でフォームデータの双方向バインディングを実現するために使用されます。v-model とは異なり、model-value はディレクティブではなく属性であり、カスタムコンポーネントのオプションで設定する必要があります。例：

app.component('my-component', {
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  template: `
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
  `
})

ここでは、my-component という名前のカスタムコンポーネントを定義し、その props に modelValue という属性を定義しています。コンポーネントのテンプレートでは、この属性を使用してフォーム要素の値をバインディングすると同時に、フォーム要素の input イベントで update:modelValue という名前のカスタムイベントを発生させ、入力された値を引数として親コンポーネントに渡しています。このカスタムコンポーネントを使用する際は、次のように v-model を使用してフォームデータの双方向バインディングを実現できます：

<my-component v-model="message" />

まとめると、v-model は Vue.js でフォームデータの双方向バインディングを実現するために使用される一般的なディレクティブであり、model-value はカスタムコンポーネントでフォームデータの双方向バインディングを実現する新しい方法です。