说说你对v-model 原理的理解？

v-model是什么？

v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。 可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

 // 标准写法
 <input v-model="name">
 
 // 等价于
 <input :value="name" @input="name = $event.target.value">
 
 // 在组件上面时
 <div :value="name" @input="name = $event"></div>

• 当在input输入框输入内容时，会自动的触发input事件，更新绑定的name值。
• 当name的值通过JavaScript改变时，会更新input的value值

根据上面的原理，vue就通过v-model实现双向数据绑定

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

为什么使用v-model？

v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。

v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。

1. 父子组件之间的双向绑定
2. DOM元素上双向绑定

第二种场景分两个方向：

1. 改变数据时通知视图更新：
   vue初始化时会进行依赖收集，通过Object.definedProperty()的getter收集某个属性的所有依赖，然后通过Object.definedProperty()的setter在某个属性更新时通知视图更新。
2. 视图改变时通知数据更新：
   通过监听表单元素的input事件，从而通知数据更新。

你会发现vue-model只能用于input、textarea这些表单元素。根本原因是div、span这些普通的DOM元素的“值“发生变化时，vue没办法监听到。

拜