v-model和.sync的区别

一、作用

v-model和.sync都是用来做双向绑定的

.sync一般适用于父子之间的双向绑定，区别就是v-model在一个组件只能使用一次，.sync在一个组件使用多次

二、原理

  v-model原理

<input v-model="msg">
//等于下面
<input :value="val" @input="val=$event.target.value">

v-model常用的修饰符 

lazy作用：v-model在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值和绑定的属性进行同步。v-model.lazy会将绑定的事件切换为change事件，只有在提交（比如回车）才会触发。
number作用：v-model绑定的值最终都会转为string类型，及时设置type为number。
v-model.number非数字以后的字符会被过滤，绑定的value类型隐士转换为number。
trim作用：自动过滤用户输入的守卫空白字符（字符首尾的空格会被过滤）。 

.sync修饰符原理

通过.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> 

4、.sync与v-model区别：
相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。
区别点：
格式不同。 v-model=“num”, :num.sync=“num”
v-model： @input + value
:num.sync: @update:num
v-model只能用一次；.sync可以有多个