Vue2中v-model和.sync的区别？

在 Vue 2 中，`v-model` 和 `.sync` 是两种用于双向数据绑定的指令，它们有一些区别和应用场景。

1. `v-model`：
   `v-model` 是一个语法糖，用于在表单元素上实现双向数据绑定。它在不同的表单元素上具有不同的行为，自动处理用户输入和更新组件的数据。

   `v-model` 的底层实现其实是通过 `:value` 属性和 `@input` 事件的结合来实现双向绑定。当用户修改表单元素的值时，`v-model` 会自动更新组件的数据，反之亦然。

   示例：

 <template>
     <input v-model="message" />
 </template>

   在上述示例中，`v-model="message"` 会将 `<input>` 元素的值与 `message` 数据进行双向绑定。

2. `.sync`：
   `.sync` 修饰符是一种在子组件中更新父组件数据的方式。它允许子组件通过触发自定义事件并传递数据来修改父组件的属性。

   使用 `.sync` 修饰符时，父组件需要将子组件的属性通过 `.sync` 传递给子组件，并监听子组件触发的事件来更新属性的值。   

示例：

<!-- 父组件 -->
   <template>
     <Child :message.sync="message" />
   </template>

   <!-- 子组件 -->
   <template>
     <input :value="message" @input="$emit('update:message', $event.target.value)" />
   </template>

   在上述示例中，父组件通过 `:message.sync="message"` 将 `message` 属性传递给子组件，并监听子组件触发的 `update:message` 事件来更新 `message` 属性的值。

总结：

• `v-model` 是用于在表单元素上实现双向数据绑定的语法糖。
•  `.sync` 是一种允许子组件修改父组件属性的方式，需要在父组件上使用修饰符和监听事件。
• `v-model` 主要用于表单元素的双向数据绑定，而 `.sync` 适用于父子组件之间的数据通信。
• 在 Vue 3 中，`.sync` 已被移除，而是使用 `v-model` 来实现父子组件之间的双向绑定。