v-model

v-model

​ vue面试常被问到的问题， 请你说一下 v-model的原理？ 下面我们就一起共同了解一下 v-model;

是一个语法糖

​ v-model 是一个语法糖， 不仅可以作用于表单元素， 有可作用于自定义组件， 最终会形成一个属性和一个事件。

作用于表单元素时

​ vue 会根据作用的表单元素类型而生成合适的属性和事件，作用于普通文本框时，他会生成 value 属性和input 事件，而当期作用于单选框或多选框时，他会生成checked属性和change事件。

​ 使用普通文本框时，如下示例：

​ 其中v-model和@input事件和绑定的value的值都能实现双向绑定的效果， 我们可以通过查看 vue 创建的 虚拟dom节点 来看一下 v-model 的真实面目：

我们找到 input 所对相应的 VNode， 可以看到绑定的确实是一个value值 和 input事件；

​ 使用选择框时：

可以看到 在使用单选框的时候，绑定的事件换为了 change 事件， 其实在 vue 中使用v-model 时 vue 会自动根据表单元素的类而生成合适的属性和事件。

作用于自定义组件

​ 当其作用于自定义组件时，默认的会生成input事件和value属性， 我们可以通过在自定义组件中接受 value 属性 和 触发父级的 input 事件实现数据的双向绑定， 而 v-model 语法糖恰恰也可以通过这一种事件和属性的组合完成， 我们可以通过查看自定义组件在vue 中所创建的虚拟节点来一探究竟：

通过打印虚拟节点不难发现在自定义组件中也是通过input事件和value属性来完成的双向绑定。从上文我们知道 v-model 语法糖不只有input和value 可以实现， 还有change和checked也可以， 那么在自定义组件中我们也可以尝试一下：

通过组建的model配置来改变生成的属性和事件：

通过change和checked实现后组件依然可以正常使用， 不过在自定义组件中使用 v-model 默认使用的还是 input 事件 和 value 属性。