v-model的本质

    <!--v-model写法-->
    <my-component type="text" v-model="value">
    <!--展开语法糖后的写法-->
    <my-component type="text"
      :value="value"
      @input="value = $event.target.value"
    >
    <!--
    默认针对原生组件input事件，但是如果子组件定义了针对事件
    model: {
            prop: "value",
            event: "update"
    },
    则编译为
    -->
    <my-component type="text"
      :value="value"
      @update="(val) => value = val"
    >
 

.sync本质

    <!--语法糖.sync-->
    <my-component :value.sync="value" />
    <!--编译后的写法-->
    <my-component 
      :value="msg" 
      @update:value="(val) => value = val"
    >
 

两者本质都是一样，并没有任何区别： “监听一个触发事件”="(val) => value = val"。

细微之处的区别

1.只不过v-model默认对应的是input或者textarea等组件的input事件，如果在子组件替换这个input事件，其本质和.sync修饰符一模一样。比较单一，不能有多个。

// 子组件可以用自定义事件，来替换v-model默认对应的原生input事件，只不过我们需要在子组件手动 $emit
model: {
        prop: "value",
        event: "update"
},
 

一个组件可以多个属性用.sync修饰符，可以同时”双向绑定多个“prop”，而并不像v-model那样，一个组件只能有一个。

总结功能作用场景：

1. v-model针对更多的是最终操作结果，是双向绑定的结果，是value，是一种change操作。

比如：输入框的值、多选框的value值列表、树结构最终绑定的id值列表（ant design和element都是）、等等…

2. .sync针对更多的是各种各样的状态，是状态的互相传递，是status，是一种update操作。

比如：组件loading状态、子菜单和树结构展开列表（状态的一种）、某个表单组件内部验证状态、等等….
image.png

但是也有例外，就是v-model也可以替代部分.sync的情况，这是针对于这个组件只有一个功能就是切换状态的时候，这个状态就是最终操作值，这时候可以替代.sync修饰符。使用两种不同的方式双向绑定，能够让我们快速理解组件的结构。