v-model是如何实现的？语法糖实际是什么？

v-model提供双向数据绑定。v-model本质就是一个语法糖是属性绑定和事件监听组合实现的。

1.当v-model作用在表单元素input上时，底层其实就是v-bind：value和v-on:input指令的一个合写。

<input v-model="message">

<input 
  :value="message"     <!-- 将数据 message 绑定到 input 的 value -->
  @input="message = $event.target.value" <!-- 监听 input 事件更新数据 -->
>

其中v-bind:value负责绑定数据到视图，也就是数据变化，视图也跟着改变。

v-on：input使用$event.target.value，获取当前inputdom元素的值，然后监听输入框视图变化并更新数据，也就是视图改变，数据也跟着变。

2.v-model还能作用自定义组件上去，作用在在父子通信的父组件上面，减少父传子子传父代码量

​绑定 value 属性：父组件通过 v-model 传递的值会作为子组件的 value prop的属性名。

​触发 input 事件：子组件通过触发 input 事件来更新父组件的数据。

但需要注意的是子组件props必须得用value属性接收，传给父组件时的监听事件名也应该使用input。这样的话才能在父组件中合写。