vue .sync 和 v-model 区别

在Vue.js中，.sync修饰符和v-model都用于实现双向数据绑定，但它们在应用场景和实现方式上有显著区别：

1. 核心用途

• v-model
  主要用于表单元素或自定义组件的单一数据双向绑定。默认绑定value属性和input事件（可配置为其他属性和事件）。
• .sync
  用于多个props的双向绑定。通过触发update:propName事件更新父组件的值，适合需要同步多个props的场景。

2. 语法实现

• v-model
  语法糖，等价于绑定value属性和监听input事件：

<child :value="data" @input="data = $event" />

自定义组件可通过model选项修改默认行为：

model: { prop: 'checked', event: 'change' }

.sync

语法糖，等价于绑定属性和监听update:propName事件：

<child :title="pageTitle" @update:title="pageTitle = $event" />

3. 数量限制

• v-model
  在Vue 2中，一个组件只能有一个v-model。
• .sync
  支持多个props的双向绑定，例如：

<child :name.sync="userName" :age.sync="userAge" />

4. Vue 3中的变化

• v-model
  支持参数化绑定，替代.sync的功能，例如：

<child v-model:name="userName" v-model:age="userAge" />

• Vue 3中不再推荐使用.sync，转而用带参数的v-model。

5. 使用场景

• v-model
  适用于核心数据绑定（如输入框、开关状态等）。
• .sync
  适用于需要同步多个props的场景（如弹窗组件的多个配置参数）。

示例对比

• v-model（Vue 2）
  父组件：

<CustomInput v-model="message" />

子组件通过value接收值，触发input事件更新：

this.$emit('input', newValue);

.sync（Vue 2）

父组件：

<Child :title.sync="pageTitle" />

子组件触发update:title事件：

this.$emit('update:title', newTitle);

总结

特性	v-model	.sync
绑定数量	单个	多个
默认绑定	value和input事件	prop和update:prop事件
Vue 2场景	核心数据绑定	多props同步
Vue 3替代方案	支持参数化（替代.sync）	废弃，改用带参数的v-model

在Vue 2中，根据需求选择：单一核心数据用v-model，多props同步用.sync；在Vue 3中，统一使用参数化的v-model。