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 是在自定义组件中实现表单数据双向绑定的一种新的方式。