Vue 3 中，`v-model` 的本质

在 Vue 3 中，v-model 的工作机制得到了进一步的增强和优化，尽管其核心概念仍然是实现双向数据绑定，但与 Vue 2 相比，它引入了更多灵活性和功能改进。

Vue 3 中 v-model 的本质

1. 默认行为：在 Vue 3 中，v-model 在基础用法上与 Vue 2 类似，依旧是在表单元素或组件上创建双向绑定。例如，在一个自定义组件上使用 v-model：

   <CustomInput v-model="searchText" />
   

   这段代码实际上等价于：

   <CustomInput :modelValue="searchText" @update:modelValue="newValue => searchText = newValue"/>
   

   可以看到，默认情况下，v-model 使用 modelValue 作为 prop 并监听 update:modelValue 事件来更新绑定的数据。

2. 多个 v-model 绑定：Vue 3 允许在一个组件上使用多个 v-model 绑定，从而支持同步多个状态。例如：

   <CustomComponent v-model:title="bookTitle" v-model:author="bookAuthor" />
   

   这使得你可以更灵活地处理不同属性的双向绑定，而不需要额外的工作量。

3. 自定义修饰符：Vue 3 支持为 v-model 添加自定义修饰符，这为开发者提供了更大的灵活性来处理输入值的转换或其他操作。

4. 简化语法：为了使代码更加简洁，Vue 3 对 v-model 的语法进行了简化，并且不再需要像 Vue 2 那样通过修改组件的 model 选项来自定义 prop 和 event 名称。现在可以直接在 v-model 上指定不同的 prop 名称，如上面提到的 v-model:title。

总之，在 Vue 3 中，v-model 不仅保持了其实现双向数据绑定的核心功能，还通过提供对多个 v-model 绑定的支持、简化语法以及自定义修饰符等功能，极大地增强了其灵活性和易用性。这些改进使得 v-model 更加适应现代 Web 开发的需求。