Vue中v-model与:model-value的区别及使用疑问

基础区别 #

• :modelValue：仅实现单向数据绑定，把父组件的searchText传递给子组件的modelValue属性。子组件若要修改父组件的数据，必须手动触发@update:modelValue事件，由父组件接收后完成赋值。单独使用它时，数据是单向流动的，子组件无法直接修改父组件状态。
• v-model：Vue提供的语法糖，完全等价于同时编写:modelValue="searchText"和@update:modelValue="searchText = $event"。它帮你省去手动绑定事件的代码，自动完成双向数据同步。

为什么会看到同时用v-model和@update:modelValue？ #

你遇到的这种写法：

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

通常有以下几种场景：

1. 新手冗余写法 #

不少刚接触Vue3的开发者没完全吃透v-model的语法糖逻辑，误以为需要手动添加更新事件，实际上这属于完全多余的代码。v-model已经内置了@update:modelValue的处理逻辑，重复编写会导致子组件触发更新时，父组件执行两次赋值操作，属于无效且易混淆的写法。

2. 拦截或增强更新逻辑 #

如果手动编写的事件不是简单的赋值，而是带有额外处理逻辑，比如：

<CustomInput
  v-model="searchText"
  @update:modelValue="newValue => {
    const formattedValue = newValue.trim().toUpperCase()
    searchText = formattedValue
  }"
/>

这种情况是为了覆盖v-model的默认更新行为——v-model默认会直接把事件参数赋值给绑定变量，而手动添加的事件可以在赋值前做格式化、校验等操作。不过这种写法并不规范，因为v-model的默认更新和手动事件会同时触发，更合理的做法是要么拆分:modelValue和自定义事件，要么在子组件内部处理数据后再触发更新。

3. 迁移遗留代码 #

从Vue2升级到Vue3的项目中，可能保留了Vue2里v-model和@input同时使用的习惯（Vue2中v-model等价于:value+@input），迁移时仅把@input改成@update:modelValue，却没移除v-model，最终导致了冗余写法。

总结 #

• 日常开发中，自定义组件使用v-model="searchText"就足够，它完全等价于手动绑定:modelValue和@update:modelValue，没必要重复编写。
• 如果需要对更新逻辑做额外处理，建议要么在子组件内部处理后再触发事件，要么手动拆分绑定和事件，避免同时使用v-model和手动事件绑定，减少代码混淆。

内容的提问来源于stack exchange，提问作者anna