Vue2中v-model和.sync的区别

1. v-model

是语法糖，用于在组件中实现双向数据绑定。

v-model的实现原理：
  1.v-model用在标签上：v-bind:value与data中定义的一个变量，然后v-on:input事件，事件处理函数中修改属性绑定的data中的变量，使这个变量的值等于当前标签的value的值。
  2.v-model用在组件上：v-bind:value与data中定义的一个变量，然后v-on:input事件，事件处理函数中修改属性绑定的data中的变量，使这个变量的值等于子组件使用$emit传递过来的值。

2. 修饰符.sync

用于实现子组件与父组件之间的双向数据绑定。可以在子组件中使用 .sync 修饰符，并通过事件的方式将更新的数据传递给父组件。

.sync的实现原理：
修饰符.sync用在组件上：v-bind:一个自定义属性与data中定义的一个变量，然后v-on:一个名为“update:自定义属性”的自定义事件，事件处理函数中修改属性绑定的data中的变量，使这个变量的值等于子组件使用$emit传递过来的值。

3. 区别

1. 语法层面

v-model是一个语法糖, 用于在组件中简化双向属于绑定, 它可以直接应用在表单元素上
.sync是一个修饰符, 用于在父组件和子组件之间实现双向数据绑定, 它可以用于任何组件的自定义属性上

2. 用法: 

v-model主要用于组件的输入和输出的数据绑定, 它可以简化组件内部状态和父组件之间的数据传递
.sync用于父子组件之间的数据双向绑定, 它通过让父组件监听子组件属性的更新并传递一个更新改属性的事件, 实现数据的双向同步

3. 传递数据的方式:

在Vue2中, v-model通过默认的input事件和value属性来实现数据的传递, 且在同一组件中只能使用一次, .sync通过自定义属性名.sync和update事件实现数据的传递, 而在Vue3中, .sync被移除, v-model可以多次使用, 且v-model绑定的属性为modelValue, 监听的事件为@update:modelValue

值得一提的是，vue3中取消了修饰符.sync，并且把.sync的功能合并到了v-model上。