说到v-model,就想到了双向数据绑定,而且往往最常见的是在表单元素<input>,<textarea>,<select>
中的使用。
那么为什么v-model双向数据绑定,自动更新元素呢?
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:
text 和 textarea 元素使用 value 属性和 input 事件;
checkbox 和 radio 使用 checked 属性和 change 事件;
select 字段将 value 作为 prop 并将 change 作为事件。
因此我们将来好好探讨一下:
if (el.component) { genComponentModel(el, value, modifiers) // component v-model doesn't need extra runtime return false } else if (tag === 'select') { genSelect(el, value, modifiers) } else if (tag === 'input' && type === 'checkbox') { genCheckboxModel(el, value, modifiers) } else if (tag === 'input' && type === 'radio') { genRadioModel(el, value, modifiers) } else if (tag === 'input' || tag === 'textarea') { genDefaultModel(el, value, modifiers) } else if (!config.isReservedTag(tag)) { genComponentModel(el, value, modifiers) // component v-model doesn't need extra runtime return false } else if (process.env.NODE_ENV !== 'production') { ... }
源码地址:web/compiler/directives/model.js 37~61行
<!--text类型--> <input v-model="singleMsg"> <!--textarea类型--> <textarea v-model="multiMsg"></textarea>
等价于:
<input type="text" v-bind:value="singleMsg" v-on:input="singleMsg=$event.target.value" > <textarea v-bind:value="multiMsg" v-on:input="multiMsg=$event.target.value"></textarea>
真的是这样吗?我们来看看源码。
function genDefaultModel ( el: ASTElement, value: string, modifiers: ?ASTModifiers ): ?boolean { const type = el.attrsMap.type // warn if v-bind:value conflicts with v-model // except for inputs with v-bind:type if (process.env.NODE_ENV !== 'production') { ... } const { lazy, number, trim } = modifiers || {} const needCompositionGuard = !lazy && type !== 'range' const event = lazy // 此处我们没有传入lazy修饰符,因此event变量是'input' ? 'change' : type === 'range' ? RANGE_TOKEN : 'input' let valueExpression = '$event.target.value' if (trim) { valueExpression = `$event.target.value.trim()` } if (number) { valueExpression = `_n(${valueExpression})` } let code = genAssignmentCode(value, valueExpression) if (needCompositionGuard) { code = `if($event.target.composing)return;${code}` } addProp(el, 'value', `(${value})`) // <input type="text" v-bind:value="singleMsg" ="singleMsg=$event.target.value" > addHandler(el, event, code, null, true) // 这一步印证了input事件<input v-on:input="..."> if (trim || number) { addHandler(el, 'blur', '$forceUpdate()') } }
源码分析在源码中有注释。
通过源码我们可以看出:
input(type=“text”)和textarea的v-model,通过value prop获得值,最终被解析为设置value attribute和input(若设置lazy,则触发change)事件,从而实现双向绑定。
源码地址:web/compiler/directives/model.js 127~147行
<!--checkbox类型--> <input type="checkbox" v-model="checkboxCtrl"> <!--input类型--> <input type="radio" v-model="radioCtrl">
等价于:
<input type="checkbox" v-bind:value="checkboxCtrl" v-on:change="checkboxCtrl=$event.target.checked"> <input type="radio" v-bind:value="radioCtrl" v-on:change="radioCtrl=$event.target.checked">
function genCheckboxModel ( el: ASTElement, value: string, modifiers: ?ASTModifiers ) { const number = modifiers && modifiers.number const valueBinding = getBindingAttr(el, 'value') || 'null' // 从v-bind的value获得到初始值,印证了 <input v-bind:value="..."> const trueValueBinding = getBindingAttr(el, 'true-value') || 'true' const falseValueBinding = getBindingAttr(el, 'false-value') || 'false' addProp(el, 'checked', // 设置标签的checked attribute,印证了<input ="checkboxCtrl=$event.target.checked"> `Array.isArray(${value})` + `?_i(${value},${valueBinding})>-1` + ( trueValueBinding === 'true' ? `:(${value})` : `:_q(${value},${trueValueBinding})` ) ) addHandler(el, 'change', // 这一步印证了<input v-on:change="..."> `var $$a=${value},` + '$$el=$event.target,' + `$$c=$$el.checked?(${trueValueBinding}):(${falseValueBinding});` + 'if(Array.isArray($$a)){' + `var $$v=${number ? '_n(' + valueBinding + ')' : valueBinding},` + '$$i=_i($$a,$$v);' + `if($$el.checked){$$i<0&&(${genAssignmentCode(value, '$$a.concat([$$v])')})}` + `else{$$i>-1&&(${genAssignmentCode(value, '$$a.slice(0,$$i).concat($$a.slice($$i+1))')})}` + `}else{${genAssignmentCode(value, '$$c')}}`, null, true ) }
function genRadioModel ( el: ASTElement, value: string, modifiers: ?ASTModifiers ) { const number = modifiers && modifiers.number let valueBinding = getBindingAttr(el, 'value') || 'null' // 印证了 <input v-bind:value="..."> valueBinding = number ? `_n(${valueBinding})` : valueBinding addProp(el, 'checked', `_q(${value},${valueBinding})`) // 设置标签的checked attribute,印证了<input ="radioCtrl=$event.target.checked"> addHandler(el, 'change', genAssignmentCode(value, valueBinding), null, true) // 这一步印证了<input v-on:change="..."> }
源码分析在源码中有注释。
通过源码我们可以看出:
input(type=“checkbox”)和input(type="radio")的v-model,通过value prop获得值,最终被解析为设置checked attribute和change事件,从而实现双向绑定。
源码地址:web/compiler/directives/model.js 67~96行
<!--select类型--> <select v-model="selectCtrl"> <option>A</option> <option>B</option> <option>C</option> </select>
等价于:
<select v-bind:value="selectValue" v-on:change="selectValue=$event.target.options.selected"> <option>A</option> <option>B</option> <option>C</option> </select>
function genSelect ( el: ASTElement, value: string, modifiers: ?ASTModifiers ) { const number = modifiers && modifiers.number // 这一步印证了<select v-bind:value="selectValue" ...="selectValue=$event.target.options.selected"> const selectedVal = `Array.prototype.filter` + `.call($event.target.options,function(o){return o.selected})` + `.map(function(o){var val = "_value" in o ? o._value : o.value;` + `return ${number ? '_n(val)' : 'val'}})` const assignment = '$event.target.multiple ? $$selectedVal : $$selectedVal[0]' let code = `var $$selectedVal = ${selectedVal};` code = `${code} ${genAssignmentCode(value, assignment)}` // 这一步印证了 <select v-on:change="..."> addHandler(el, 'change', code, null, true) }
源码分析在源码中有注释。
通过源码我们可以看出:
select的v-model,通过value prop获得值,最终被解析为设置selected attribute和change事件,从而实现双向绑定。
源码地址:web/compiler/directives/model.js 110~125行
const { lazy, number, trim } = modifiers || {} ... const event = lazy ? 'change' : type === 'range' ? RANGE_TOKEN : 'input' ... if (trim) { valueExpression = `$event.target.value.trim()` } if (number) { valueExpression = `_n(${valueExpression})` }
/** * Convert an input value to a number for persistence. * If the conversion fails, return original string. */ export function toNumber (val: string): number | string { const n = parseFloat(val) return isNaN(n) ? val : n }
参考资料:
https://cn.vuejs.org/v2/guide...
https://developer.mozilla.org...
https://developer.mozilla.org...
期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:
- SegmentFault技术圈:ES新规范语法糖
- SegmentFault专栏:趁你还年轻,做个优秀的前端工程师
- 知乎专栏:趁你还年轻,做个优秀的前端工程师
- Github博客: 趁你还年轻233的个人博客
- 前端开发QQ群:660634678
- 微信公众号: 人兽鬼 / excellent_developers
努力成为优秀前端工程师!