开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情
大家都知道，v-mode`就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。
v-model和.sync的区别
v-model和.sync最主要的区别是：一个组件身上只能有一个v-model 但是.sync修饰符能有多个
v-model的原理
<com1 v-model="num"></com1>
等价于
<com1 :value="num" @input="(val)=>this.num=val"></com1>
v-model其实是一个语法糖，他背后的本质上是包含两个操作
- v-bind绑定一个value属性
- v-on指令给当前元素绑定input事件
可以看成是value + input方法的语法糖。 可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性
.sync修饰符的原理
同样的，.sync修饰符也可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。
正常父传子：
<com1 :a="num" :b="num2"></com1>
加上sync之后父传子：
<com1 :a.sync="num" .b.sync="num2"></com1>
它等价于
<com1
:a="num" @update:a="val=>num=val"
:b="num2" @update:b="val=>num2=val"></com1>
相当于多了一个事件监听，事件名是update:a，回调函数中，会把接收到的值赋值给属性绑定的数据项中。 所以，.sync修饰符什么时候用最好呢？当一个子组件想要改变一个外部数据props传入的值时，应该通过$emit触发修改事件通知父组件，而父组件通过v-on进行监听，并自行修改。但是不能在子组件中自行修改，因为会引发异步问题。此时可以使用.sync修饰符，使这个变化也会同步到父组件中，起到语法糖的效果。
.sync与v-model区别是
相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。
区别点：
- 格式不同。 v-model="num", :a.sync="num"
- v-model： @input + value
- :a.sync: @update:a
- v-model只能用一次；.sync可以有多个
