v-model 是如何实现的
1.作用在表单元素上
动态绑定了 input 的 value， 指向了 messgae 变量，并且在触发 input 事件的时候去动态把 message设置为目标值：
<input v-model="sth" />
// 等同于
<input v-bind:value="message"
v-on:input="message=$event.target.value">
//$event 指代当前触发的事件对象;
//$event.target 指代当前触发的事件对象的dom;
//$event.target.value 就是当前dom的value值;
//在@input方法中，value => sth;
//在:value中,sth => value;
2.作用在组件上
在自定义组件中，v-model 默认会利用名为 value 的 prop和名为 input 的事件
本质是一个父子组件通信的语法糖，通过prop和$.emit实现。 因此父组件 v-model 语法糖本质上可以修改为：
<child :value="message" @input="function(e){message = e}"></child>
在组件的实现中，可以通过 v-model属性来配置子组件接收的prop名称，以及派发的事件名称。
<aa-input v-model="aa"></aa-input>
// 等价于
<aa-input v-bind:value="aa" v-on:input="aa=$event.target.value"></aa-input>
// 子组件：
<input v-bind:value="aa" v-on:input="onmessage"></aa-input>
props:{value:aa,}
methods:{
onmessage(e){
$emit('input',e.target.value)
}
}
默认情况下，一个组件上的v-model 会把 value 用作 prop且把 input 用作 event。但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。 使用 model 选项可以回避这些情况产生的冲突。 js 监听input 输入框输入数据改变，用oninput，数据改变以后就会立刻出发这个事件。 通过input事件把数据emit过来的值。
语法糖
指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。糖在不改变其所在位置的语法结构的前提下，实现了运行时的等价。可以简单理解为，加糖后的代码编译后跟加糖前一样，代码更简洁流畅，代码更语义自然。
总结：
1.v-model的实现：
（1）作用在表单元素上：动态绑定input的value值，触发input事件时动态将value值作为目标值；
（2）作用在组件上：自定义组件中，v-model默认利用名为value的prop和名为input的事件；通过v-model属性配置子组件接收的prop名称，及派发的事件名称；
（3）一般一个组件上的v-model将value用作prop,input 用作event（事件）；但例如单选复选框按钮不能使用value prop实现。解决办法：
使用model选项回避该情况产生的冲突：js监听input输入框数据的改变，数据发生改变就触发oninput事件。通过input事件把数据$emit出去，在父组件中用v-model接收 input emit过来的值。
2.语法糖总结：
计算机中添加的某种语法，对功能无影响，只是增强了程序可读性，在不改变语法结构的前提下，实现运行时的等价。
