一：.sync

可以实现父子组件之间的双向绑定，

并且可以实现子组件同步修改父组件的值，父子组件之间数据相互更新，

针对更多的是各种的状态变更，是一种 update 操作

相当于多了一个事件监听，会把接受到的值赋值给数据绑定的数据项中

<Son :a.sync="num" :b.sync="num2" />

<!-- 它等价于 -->
<Son
  :a="num"
  :b="num2"
  @update:a="val=>num=val"
  @update:b="val=>num2=val"
/>

this.$emit('update:a', '123')

二：v-model

在表单 input、textarea、select 等元素上创建双向数据绑定，

（value + input语法糖），为不同的输入元素使用不同的属性并抛出不同的事件

1：text 和 textarea =>使用 value 属性和 input 事件

2：checkbox 和 radio =>使用 checked 属性和 change 事件

3：select 字段将 value =>作为 prop 并将 change 作为事件

<com1 v-model="num"></com1>
<!-- 等价于 -->
<com1 :value="num" @input="(val)=>num=val"></com1>

三：相同点

都可以实现父子组件中的数据的双向通信，都是为了实现数据的“双向绑定”

四：不同点

1：格式写法不同，v-model="num", :num.sync="num"

2：实现方式不同，v-model: @input + value , :num.sync: @update:num

3：数量不同，v-model只能用一次；.sync可以有多个

五：注意点

1：vue3已经弃用.sync，并且v-model支持多个

2：带有 .sync 不能 和表达式、字面量的对象一起使用