双向数据绑定v-model的实现原理

v-model只是一个语法糖，常用于表单与组件之间的数据双向绑定.

一、原理分为分为两个步骤:

1.v-bind绑定一个value属性

2.v-on指令给当前元素绑定input事件

<input v-model="something">
只是一个语法糖
<input v-bind:value="someting" v-on:input="something = $event.target.value">

相当于
<custom-input v-bind:value="something" v-on:input="something = arguements[0]"></custom-input>

二、实现

可以看出v-model绑定在表单上时,v-model其实就是v-bind绑定value和v-on监听input事件的结合体.

v-model = v-bind:value + v-on:input

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

1.通过 v-bind:value 绑定 value变量，每次输入内容的时候触发input事件
2.通过事件对象参数 event.target.value 获得输入的内容，并且把这个内容赋值给value
3.此时更改username时input输入框会变化，更改input输入框时value变量会变，从而实现了v-model的双向绑定功能。