Vue.js 中的 v-model 和 model-value 区别
内容提要
v-model 是 Vue.js 的语法糖指令，用于表单元素双向绑定，自动监听 input 或 change 事件同步数据。Vue 3 新增 model-value 属性，用于自定义组件双向绑定，需配置 props 和 emits，通过 update:modelValue 事件传值，使用时仍可用 v-model。
延伸解读
v-model 的本质：语法糖与自动事件监听
v-model 并非独立功能，而是 Vue 提供的语法糖。在表单元素上使用时，它会自动监听 input 或 change 事件，并将元素值同步到组件数据，反之亦然。这意味着开发者无需手动编写事件绑定和值更新逻辑，简化了双向绑定的代码。理解这一点有助于区分它与自定义组件中 model-value 的不同角色。
model-value 的定位：自定义组件的双向绑定属性
model-value 是 Vue 3 新增的属性，专用于自定义组件实现双向绑定。它不是一个指令，而需要在组件的 props 中声明 modelValue，并通过 emits 定义 update:modelValue 事件。子组件通过触发该事件将新值传给父组件，父组件仍可用 v-model 绑定。这为自定义组件提供了标准化的双向绑定接口。
使用场景对比：表单元素 vs 自定义组件
v-model 主要用于原生表单元素，如 input、select 等，自动处理事件监听。而 model-value 用于自定义组件，需要开发者手动配置 props 和 emits，并在模板中显式绑定值和触发事件。两者最终都通过 v-model 在模板中使用，但底层机制不同：前者是内置语法糖，后者依赖组件选项配置。
Q&A
Vue.js 中 v-model 和 model-value 有什么区别？
v-model 是 Vue.js 的语法糖指令，用于表单元素的双向绑定，自动监听 input 或 change 事件同步数据。model-value 是 Vue 3 新增的属性，用于自定义组件实现双向绑定，需在组件中配置 props 和 emits，通过 update:modelValue 事件传值。
v-model 在 Vue 中是如何实现双向绑定的？
v-model 是语法糖，当在表单元素上使用 v-model 时，它会自动监听元素的 input 或 change 事件，将表单元素的值同步到 Vue 组件数据中，反之亦然。例如 <input v-model="message" /> 会将输入值和 message 数据双向绑定。
在 Vue 3 中，如何在自定义组件上使用 v-model 实现双向绑定？
在自定义组件中，需要定义 props 接收 modelValue，并定义 emits 触发 update:modelValue 事件。模板中绑定 :value="modelValue" 并在 input 事件中触发 $emit('update:modelValue', $event.target.value)。父组件使用 <my-component v-model="message" /> 即可实现双向绑定。
model-value 是 Vue 3 的新特性吗？它和 v-model 有什么联系？
是的，model-value 是 Vue 3 新增的属性，用于自定义组件双向绑定。它不是一个指令，而是一个属性，需要配置 props 和 emits。使用时仍然可以通过 v-model 来绑定，因为 v-model 在自定义组件上会展开为 modelValue 属性和 update:modelValue 事件。
v-model 和 model-value 分别适用于什么场景？
v-model 适用于原生表单元素（如 input、select 等）的双向绑定，是常用指令。model-value 适用于自定义组件的双向绑定，需要在组件内部配置 props 和 emits，通过 update:modelValue 事件实现数据同步。
在自定义组件中，model-value 属性是如何与父组件通信的？
自定义组件通过 props 接收 modelValue 属性，并在表单元素的 input 事件中触发 update:modelValue 事件，将新值作为参数传递给父组件。父组件使用 v-model 绑定后，会自动监听该事件并更新数据，从而实现双向绑定。
