为何Vue的v-model在组件与原生元素中展开形式不同？

先看Vue官方文档里的两种v-model展开逻辑：

原生输入组件的v-model：

<input v-model="searchText" />
// 展开为
<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

自定义输入组件的v-model：

<CustomInput v-model="searchText" />
// 展开为
<CustomInput
  :model-value="searchText"
  @update:model-value="newValue => searchText = newValue"
/>

很多人会疑惑，为啥自定义组件不沿用原生的value和input？核心原因有这几点：

• 避免属性语义冲突：自定义组件的value属性可能有自己的用途，比如一个带标签的输入组件，value可能用来存储标签的ID，而不是用户输入的文本。如果v-model强制绑定value，会和组件自身的业务逻辑冲突，导致代码混乱。

• 支持多字段双向绑定：Vue 3允许一个组件同时绑定多个v-model，比如：

  <UserForm 
    v-model:email="userEmail" 
    v-model:password="userPassword" 
  />
  

  要是用value的话，根本没法区分不同的绑定目标。而model-value（或者自定义命名的email、password）能清晰对应不同的双向绑定字段，扩展性更强。

• 明确双向绑定的意图：model-value和@update:model-value的命名更直白，一眼就能看出这是专门用于双向绑定的属性和事件。反观value和input，在自定义组件里可能有其他含义——比如组件的input事件可能是用来通知父组件“用户点击了输入框”，而非“值更新了”，这样容易造成歧义。

• 原生元素的特殊性适配：原生input的value和input是浏览器内置的标准行为，Vue只是适配了这个既定逻辑。但自定义组件没有这种浏览器层面的约束，用通用的model-value规则，能让所有自定义组件的双向绑定逻辑保持一致，不管组件是输入类、选择器还是其他类型。

内容的提问来源于stack exchange，提问作者Minh Nghĩa