v-model

作用：

vue使用v-model实现input、textarea这些表单标签数据的双向绑定。

本质：

v-model本质上是个语法糖，实际上是<input :value="value" @input="value=$event.target.value"/>的简写。 @input就是input输入监听事件,:value=value就是将监听事件中的输入值注入到input中。
v-model不仅可以给input赋值，还可以获取input中的数据，可以实时获取到数据。

在原生表单元素中：

<input v-model="value"/>

相当于：

<input :value="value" @input="value = $event.target.value"/>

在自定义组件中

<custom-component v-model="value"></custom-component>  

相当于

<custom-component :value="value" @input="value = argument" v-model="value"></custom-component> // 父组件  

this.$emit('input', value) // 子组件中触发input事件  

.sync

作用：

.sync修饰符是一个自动更新父组件属性的v-on监听器，当子组件改变了prop的值时，会将这个变化同步到父组件。

本质：

.sync也是一个语法糖，sync修饰符的控制能在都在父组件，事件名称也是固定的update:xxx, 需要和sync前面的变量名对应起来。

自定义组件：

<custom-component :value.sync="value"></custom-component>

相当于：

<custom-component :value="value" @update:value="value = $event"></custom-component> 

当子组件需要更新value的值时，需要显示的触发一个更新事件：

this.$emit('update:value', newVal) 

也可以用一个对象同时设置多个prop，将.sync修饰符和v-bind配合使用：

// 父组件
<custom-component :doc="value"></custom-component> 

doc: {
    id: 0,
    title: 'title'
}

// 子组件
this.$emit('update:id', newVal)  
this.$emit('update:title', newVal)  

两者的共同点

两者的本质都是一样的，都是通过监听自定义事件。实现子组件向父组件传参，继而达到更新父组件状态的效果。

两者的区别

1、v-model默认对应的是input等表单标签的input事件，如果在子组件替换这个input事件，其本质和.sync修饰符一模一样。

model: {
    prop: 'value',
    event: 'update'
}

2、一个组件只能用一个v-model，而一个组件可以对多个属性使用.sync修饰符，可以同时双向绑定多个prop.

<custom-component v-model="value"></custom-component>   

<custom-component title.sync="title" name.sync="title"></custom-component> 

应用场景

v-model主要用于获取最终结果，是双向绑定的结果。比如：输入框的值、多选框的value值列表等。  

.sync修饰符主要用于状态的互相传递，是一个更新操作，比如组件loading状态，子菜单或者弹框的展开收起等等。  

当这个组件只有一个prop时，可以用v-model替换.sync修饰符。