.sync和v-model的异同

<template>
  <!-- v-model 是语法糖 -->
  <Input v-model="username">
  <!-- 默认等效与下面这行
    <Input :value="username" @input="username=$event.target.value">
   -->
</template>

但是你可以通过设置 model 选项修改默认行为，比如构建勾选框组件时，将 v-model 的行将拆分为如下：

<template>
  <KCheckBox v-model="model.remember"></KCheckBox>
  <!-- 等效与下面这行
    <KCheckBox :checked="model.remember" @change="model.remember = $event.target.value"></KCheckBox>
  -->
</tempalte>

<script>
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
	checked: Boolean,
  },
  name: 'test',
}
</script>

v-model 通常用于表单控件，这样子组件有更强的控制能力。

.sync 修饰符添加于 v 2.4，它能用于修改传递到子组件的属性，如果像下面这样写

<!-- 父组件 -->
<template>
  <Input :value.sync="model.username">
  <!-- 等效与下面这行，那么和v-model的区别只有事件名称的变化
  	<Input :foo="username" @update:foo="username=$event.target.value">
  -->
</template>

<!-- 子组件 -->
<input @input="$emit('update:foo', $event)" />

<!-- 这里是绑定属性名称更改，相应的属性名也会变化 -->
<Input :foo="username" @update:foo="username=$event.target.value">

场景: 父组件传递的属性子组件想修改，所以 .sync 修饰符的控制能力都在父级，事件名称也相对固定 update:xx；习惯上表单元素用 v-model。