如何理解vue中的v-model?
2020/3/19 11:01:52
本文主要是介绍如何理解vue中的v-model?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
说到v-model,就想到了双向数据绑定,而且往往最常见的是在表单元素<input>,<textarea>,<select>
中的使用。
那么为什么v-model双向数据绑定,自动更新元素呢?
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件: text 和 textarea 元素使用 value 属性和 input 事件; checkbox 和 radio 使用 checked 属性和 change 事件; select 字段将 value 作为 prop 并将 change 作为事件。
因此我们将来好好探讨一下:
- vue v-model源码分析
- text和textarea标签的value属性和input事件及源码genDefaultModel函数
- input标签的checkbox和radio类型的checked属性和change事件及源码genCheckboxModel函数和genRadioModel函数
- select标签的value属性和change事件及源码genSelect函数
- v-model的.lazy,.number,.trim修饰符源码分析
vue v-model源码分析
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和textarea标签的value属性和input事件及genDefaultModel函数
<!--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> 复制代码
真的是这样吗?我们来看看源码。
genDefaultModel函数
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行
input标签的checkbox和radio类型的checked属性和change事件及源码genCheckboxModel函数和genRadioModel函数
<!--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"> 复制代码
genCheckboxModel函数
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 ) } 复制代码
genRadioModel函数
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标签的value属性和change事件及源码genSelect函数
<!--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> 复制代码
genSelect 函数
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行
v-model的.lazy,.number,.trim修饰符源码分析
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})` } 复制代码
- lazy仅仅是一个判断触发标签change还是input事件的标识符,lazy为true时,触发change
- trim仅仅是调用了String.prototype.trim()
- number这是vue的_n函数,而这个函数其实是一个StringToNumber函数,相当简单
/** * 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 } 复制代码
参考资料: cn.vuejs.org/v2/guide/co… developer.mozilla.org/en-US/docs/… developer.mozilla.org/en-US/docs/…
期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:
- SegmentFault技术圈:ES新规范语法糖
- SegmentFault专栏:趁你还年轻,做个优秀的前端工程师
- 知乎专栏:趁你还年轻,做个优秀的前端工程师
- Github博客: 趁你还年轻233的个人博客
- 前端开发QQ群:660634678
- 微信公众号: 人兽鬼 / excellent_developers
努力成为优秀前端工程师!
这篇关于如何理解vue中的v-model?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南