v-model原理

v-model原理？(2021/01/05)

①是个一般作用于“表单元素”及“组件”上面指令，来创建双向数据绑定；

②说穿了就是v-bind:xxx及v-on:xxx的快捷语法糖（等价于动态增加prop+dom绑定事件）；

<p>{{inputValue}}</p>
<input v-model="inputValue"/>
改版：
<p>{{inputValue}}</p>
<input v-bind:value=”inputValue” v-on:input=”v => inputValue=v”/>

③其他表单元素改写使用的属性和事件：

Text\textarea – value – input
checkbox\radio – checked – change
Select – value – change

④自定义组件的v-model绑定：一般在自定义组件vue会默认使用名为value的prop属性及名为input的事件进行绑定；但是在其他业务场景下往往不全面，所以也提供了model属性对象配置：

Model:{
   Prop:‘checked’,
   Event:‘change’
}

这样设置了后还是仍需要在子组件内部声明props即来绑定自定义的prop值。

表现就是在子组件内部使用v-bind:checked=”propsChecked”(v-bind后面的值来自于model设置的prop;后面赋值项为父传子props下来的属性值)使用v-on:change=”$emit(‘change’,$event.target.checked)”(v-on后面的值来自model设置的event;后面事件响应到父组件监听的change事件，payload传值为当前checked状态)

⑤相关修饰符：

v-model.number(简易版验证数字输入)；
v-model.lazy（希望双向数据响应不同步而是在change事件的时候如光标离开后进行同步）;
v-model.trim（前后空格清除）

⑥源码体现：

// src/platforms/web/compiler/directives/model.js
这里我猜想通过模板编译得到‘v-model’指令及修饰符’.lazy’’.number’’.trim’ ASTModifiers
const { lazy, number, trim } = modifiers || {}再分别根据这些写逻辑
最后调用addProp()\addHandler()两个方法来实现添加属性及dom事件