Vue 的 v-model 和 model-value
内容提要
v-model 是 Vue.js 语法糖，用于表单元素双向绑定，自动监听 input 或 change 事件同步数据。model-value 是 Vue 3 新增属性，用于自定义组件双向绑定，需配置 props 和 emits，通过 update:modelValue 事件传值，使用时仍可用 v-model。
延伸解读
v-model 与 model-value 的本质区别
v-model 是 Vue 提供的语法糖，用于简化表单元素的双向绑定，自动监听 input 或 change 事件。而 model-value 是 Vue 3 新增的属性，专为自定义组件设计，需要显式配置 props 和 emits，并通过 update:modelValue 事件实现数据同步。两者虽然都用于双向绑定，但 v-model 更便捷，model-value 更灵活，适用于组件封装场景。
自定义组件中如何实现双向绑定
在 Vue 3 中，自定义组件要实现双向绑定，需在组件内声明 modelValue 属性，并在 emits 中注册 update:modelValue 事件。模板中通过 :value 绑定属性值，并在 input 事件中触发 update:modelValue 事件传递新值。父组件使用时，仍可像普通表单元素一样使用 v-model 指令，Vue 会自动处理事件监听与属性传递，从而简化代码。
使用场景与选择建议
对于原生表单元素，直接使用 v-model 即可，无需额外配置。而在封装自定义表单组件时，应使用 model-value 配合 update:modelValue 事件，以实现更清晰的数据流控制。Vue 3 中 v-model 也可用于自定义组件，但底层正是基于 model-value 和对应事件实现的。理解这一机制有助于编写更可维护的组件代码。
Q&A
Vue 中的 v-model 是什么？它有什么作用？
v-model 是 Vue.js 提供的一个语法糖，用于在表单元素上实现双向数据绑定。它会自动监听元素的 input 或 change 事件，将表单元素的值同步到 Vue 组件数据中，反之亦然。
model-value 是什么？它和 v-model 有什么区别？
model-value 是 Vue 3 新增的属性，用于在自定义组件中实现双向绑定。与 v-model 不同，它不是指令而是属性，需要在组件中配置 props 和 emits，通过 update:modelValue 事件传值。
如何在自定义组件中使用 v-model 实现双向绑定？
在自定义组件中，需要定义 modelValue 属性，并在模板中绑定该属性，同时在 input 事件中触发 update:modelValue 事件传递新值。父组件使用时仍可用 v-model 指令。
v-model 在表单元素上如何工作？
当在表单元素上使用 v-model 时，它会自动监听元素的 input 或 change 事件，将表单元素的值同步到 Vue 组件数据中，同时当数据变化时，表单元素的值也会更新。
model-value 在 Vue 3 中是如何实现双向绑定的？
model-value 通过组件的 props 接收值，并在子组件中触发 update:modelValue 事件将新值传回父组件，从而实现双向绑定。父组件使用 v-model 指令绑定即可。
v-model 和 model-value 分别适用于什么场景？
v-model 适用于原生表单元素的双向绑定，而 model-value 适用于自定义组件的双向绑定。两者都可以实现双向数据绑定，但 model-value 是 Vue 3 中自定义组件的新方式。
