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 是在自訂元件中實現表單資料雙向綁定的一種新方式。