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 是 Vue 3 新增的属性，专为自定义组件实现双向绑定而设计。它不是一个指令，而是一个属性，需要在组件的 props 中声明，并通过 emits 定义 update:modelValue 事件来传递新值。与 v-model 不同，它要求开发者显式配置组件选项，但使用时仍可借助 v-model 语法糖来简化父组件的调用。
使用场景对比：表单元素与自定义组件
v-model 主要用于原生表单元素，如 input、select 等，自动处理事件监听和数据同步。而 model-value 则针对自定义组件，需要组件内部手动绑定值和触发更新事件。两者并非替代关系，而是分别适用于不同场景：前者简化原生元素绑定，后者为自定义组件提供标准化的双向绑定接口。
Q&A
Vue.js 中 v-model 是什么？它有什么作用？
v-model 是 Vue.js 提供的一个语法糖，用于在表单元素上实现双向数据绑定。它会自动监听元素的 input 或 change 事件，将表单元素的值同步到 Vue 组件数据中，反之亦然。
Vue 3 中新增的 model-value 属性是做什么的？
model-value 是 Vue 3 新增的属性，用于在自定义组件中实现表单数据的双向绑定。它不是一个指令，而是一个属性，需要在自定义组件的选项中进行配置。
v-model 和 model-value 在实现双向绑定上有什么主要区别？
v-model 是 Vue.js 的语法糖，主要用于表单元素的双向绑定，自动监听 input 或 change 事件。model-value 是 Vue 3 新增的属性，用于自定义组件的双向绑定，需要配置 props 和 emits，通过 update:modelValue 事件传值。
如何在自定义组件中使用 model-value 实现双向绑定？
在自定义组件中，需要定义 props 中的 modelValue 属性，并在 emits 中声明 update:modelValue 事件。模板中通过 :value 绑定 modelValue，并在 input 事件中触发 $emit('update:modelValue', $event.target.value)。父组件使用时仍可用 v-model 指令。
v-model 在表单元素上是如何自动同步数据的？
当在表单元素上使用 v-model 时，它会自动监听元素的 input 或 change 事件，将表单元素的值同步到相应的 Vue 组件数据中；同时，当组件数据变化时，表单元素的值也会自动更新。
在 Vue 3 中，使用 v-model 绑定自定义组件时，底层对应什么属性和事件？
在 Vue 3 中，使用 v-model 绑定自定义组件时，底层对应 modelValue 属性和 update:modelValue 事件。组件内部通过 props 接收 modelValue，并通过触发 update:modelValue 事件来更新父组件的数据。
