v-model与.sync修饰符的区别
文章出自：掘金 https://juejin.cn/post/7106466969847201799
作者：小解不懈
在日常开发的过程中，v-model指令是经常用到的，一般来说 v-model 指令在表单及元素上创建双向数据绑定，但 v-model 本质是语法糖。但提到语法糖，这里就不得不提另一个与 v-model 有相似功能的双向绑定语法糖了，这就是.sync修饰符。
在这里就两者的使用进行一下总结:
v-model
1. 作用
相信使用过 vue 框架的朋友对这个指令不会感到陌生，v-model 是用来进行input、textarea 及 select元素上数据的双向绑定的
例如:
<template> <div> <input v-model="value" type="text"> //这里的v-model里面的value可以直接获取到用户的输入值 </div></template><script>import son from '@/yanshi/son.vue' data() { return { value: '' //这里定义的value变量可以直接将上面获取到的值进行操作 } }}</script>
当我们在 input 输入框里面输入了某个在值的时候，下面就可以直接获取到我们的输入值，而不需要操作 dom 元素进行获取
2. v-model的本质
v-model 的本质上来说，是一个语法糖
目前咱们习惯性的写法是这样的:
<input v-model="val" type="text">
但是实质上的完整写法:
<input :value="val" @input="val=$event.target.value" />
也可以将@input后面写成一个函数,然后在 methods 中进行赋值操作。
要理解这行代码，首先你要知道 input 元素本身有个 input 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 input 事件，把最新的 value 值传给传递给 val，完成双向数据绑定的效果。
我们仔细观察语法糖和原始语法那两行代码，可以得出一个结论：
在给 input 元素添加 v-model 属性时，默认会把 val 作为元素的属性，然后把 input 事件作为实时传递 value 的触发事件
注意：不是所有能进行双向绑定的元素都是 input 事件。
3. v-model的特殊用法
一般情况，咱们使用 v-model 主要是用于数据的双向绑定，可以十分方便的获取到用户的输入值。但在某些特殊情况下，我们也可以将 v-model 用于父子组件之间数据的双向绑定。
这里需要用到父子传值的相关知识:
<template> <div> <son v-model="num"/> //使用子组件 </div></template><script>import son from '@/yanshi/son.vue' //引入子组件export default { components: { son //注册子组件 }, data() { return { num: 100 } }}</script>
这里咱们先定义了一个 father 组件和一个 son 组件，并且将 son 组件引入到 father 组件中，并且给 son 组件绑定了 v-model 进行了传值。此时，我们需要到son组件中接收这个值并且使用他:
<template> <div> 我是son组件里面接收到的值: {{ value }} </div></template><script>export default { props: { value: { type: Number, required: true } }}</script>
注意: 我们这里接收的值必须是 value，写成其他名字将无法使用
一般情况下的父向子传值，子组件中是不能直接修改的，在这里我们在子组件中直接修改这个值会进行报错
例如:
<template> <div> 我是son组件里面接收到的值: {{ value }} <button @click="value+=1">点我value+1</button> </div></template>
错误信息：
当我们需要将修改这个值时，就需要再将其传入父组件进行修改。
这就需要在父组件的子组件标签上定义一个自定义的事件，通过在子组件中使用$emit('自定义事件名',值)的方法将值传入父组件
在这里我们不能使用自定义的事件，因为我们用的是 v-model 进行的传值，所以我们只能使用 input 事件进行修改
父组件中定义一个 @input 方法，再设置一个形参 val 接收子组件的传值,
<template> <div> {{ num }} <son v-model="num" @input="val=>num=val" /> </div></template>
子组件中使用$emit()方法调用父组件中的事件，并且进行传值
<template> <div> 我是son组件里面接收到的值: {{ value }} <button @click="$emit('input',value+1)">点我value+1</button> </div></template>
这样的话，就可以完成父子组件之间的数据双向绑定效果，并且不会出现报错
.sync修饰符
1. .sync修饰符作用
相比较与 v-model 来说，.sync修饰符就简单很多了:
.sync 修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。
2. .sync修饰符本质
//正常父传子： <son :a="num" :b="num2"></son>//加上.sync之后父传子： <son :a.sync="num" .b.sync="num2"></son> //它等价于<son :a="num" @update:a="val=>num=val" :b="num2" @update:b="val=>num2=val"></son> //相当于多了一个事件监听，事件名是 update:a，回调函数中，会把接收到的值赋值给属性绑定的数据项中。
这里面的传值与接收与正常的父向子传值没有区别，唯一的区别在于往回传值的时候$emit所调用的事件名必须是update:属性名，事件名写错不会报错，但是也不会有任何的改变，这点需要多注意。
总结
.sync 与 v-model 区别是：
相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。
区别点：格式不同：
v-model=“num”
:num.sync=“num”
v-model：@input + value
:num.sync：@update:num
另外需要特别注意的是：v-model 只能用一次；.sync 可以有多个。