AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

如何理解vue中的v-model？

2022-06-08 175
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 说到v-model，就想到了双向数据绑定，而且往往最常见的是在表单元素<input>,<textarea>,<select>中的使用，在一些自定义组件中也使用到了v-model。

image.png


那么为什么v-model双向数据绑定，自动更新元素呢？

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：text 和 textarea 元素使用 value 属性和 input 事件；checkbox 和 radio 使用 checked 属性和 change 事件；select 字段将 value 作为 prop 并将 change 作为事件。


因此我们将来好好探讨一下：


  • vue v-model源码分析


  • vue如何获取v-mode的值（value）
  • 用于生成各种类型model的gen*函数
  • vue如何设置v-mode的值（value）
  • <input v-model="..."><textarea v-model="..."></textarea>源码分析
  • <input type="checkbox" v-model="..."><input type="radio" v-model="...">源码分析
  • <select v-model="..."><option>...</option></select>源码分析
  • 自定义组件中的v-model源码分析
  • v-model的.lazy,.number,.trim修饰符源码分析


vue v-model源码分析

vue如何获取v-mode的值（value）


export default function model (
  el: ASTElement,
  dir: ASTDirective,
  _warn: Function
): ?boolean {
  warn = _warn
  const value = dir.value // vue通过这一行取到了v-model中的值，例如v-model="isChecked",v-model="inputValue"中isChecked和inputValue的值
...
}


const value = dir.value


vue通过这一行取到了v-model中的值，例如v-model="isChecked",v-model="inputValue"中isChecked和inputValue的值。

源码地址：web/compiler/directives/model.js 14~20行


其中ASTDirective的interface定义如下：


export interface ASTDirective {
  name: string;
  rawName: string;
  value: string; // 注意这里
  arg: string | undefined;
  modifiers: ASTModifiers | undefined;
}


源码地址：packages/vue-template-compiler/types/index.d.ts 80~86行


用于生成各种类型model的gen*函数


  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') {
    ...
  }

其中包括gen*开头的生成model的各种函数，我们会在下文中进行分析。

源码地址：web/compiler/directives/model.js 37~61行


vue如何设置v-mode的值（value）


genAssignmentCode函数（事件更新时，最终set v-model值的函数）


// 自定义component组件
const assignment = genAssignmentCode(value, valueExpression)
// input(text),textarea
let code = genAssignmentCode(value, valueExpression)
// <radio>
addHandler(el, 'change', genAssignmentCode(value, valueBinding), null, true)
// <select>
code = `${code} ${genAssignmentCode(value, assignment)}`
// <checkbox>
  addHandler(el, '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
  )



/**
 * Cross-platform codegen helper for generating v-model value assignment code.
 */
export function genAssignmentCode (
  value: string,
  assignment: string
): string {
  const res = parseModel(value)
  if (res.key === null) {
    return `${value}=${assignment}`
  } else {
    return `$set(${res.exp}, ${res.key}, ${assignment})`
  }
}


源码地址：src/compiler/directives/model.js 36~46行


<input v-model="..."><textarea v-model="..."></textarea>源码分析

一句话概览：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 type="checkbox" v-model="..."><input type="radio" v-model="...">源码分析

一句话概览：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 v-model="..."><option>...</option></select>源码分析

一句话概览：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源码分析

一句话概览：如何理解自定义组件中的v-model及genComponentModel，transformModel函数？


其实不仅仅是input，textarea，和select这些常见的原生表单元素可以使用v-model，对于自定义的vue组件我们也可以使用v-model。

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})
<base-checkbox v-model="lovingVue"></base-checkbox>
lovingVue的值会传入checked这个prop，同时当组件触发一个change事件并且附带了一个新值的时候，lovingVue的值会被更新。

如何从源码去理解这一段话吗？


genComponentModel函数（构造出需要调用transformModel函数的el.model对象）


export function genComponentModel (
  el: ASTElement,
  value: string,
  modifiers: ?ASTModifiers
): ?boolean {
  const { number, trim } = modifiers || {}
  ...
  const assignment = genAssignmentCode(value, valueExpression)
  el.model = {
    value: `(${value})`,
    expression: JSON.stringify(value),
    callback: `function (${baseValueExpression}) {${assignment}}`
  }
}

源码地址：src/compiler/directives/model.js 6~31行

重点关注el.model这一行。因为vue在创建自定义组件时，会对el.model这一行进行一些操作。


  // transform component v-model data into props & events
  if (isDef(data.model)) {
    transformModel(Ctor.options, data)
  }


transformModel函数（转化组件v-model的value和callback到prop和event handler）


// transform component v-model info (value and callback) into
// prop and event handler respectively.
function transformModel (options, data: any) {
  const prop = (options.model && options.model.prop) || 'value' //   model: {prop: 'checked',event:'change'} 中的”checked“作为prop
  const event = (options.model && options.model.event) || 'input' // model: {prop: 'checked',event:'change'} 中的”change“作为event
  ;(data.attrs || (data.attrs = {}))[prop] = data.model.value // lovingVue的值会传入checked这个prop
  const on = data.on || (data.on = {})
  const existing = on[event]
  const callback = data.model.callback
  if (isDef(existing)) {
    if (
      Array.isArray(existing)
        ? existing.indexOf(callback) === -1
        : existing !== callback
    ) {
      on[event] = [callback].concat(existing)
    }
  } else {
    on[event] = callback // "同时当组件触发一个change事件并且附带了一个新值的时候，lovingVue的值会被更新。"
  }
}


源码地址：src/core/vdom/create-component.js 250~268行

”lovingVue的值会传入checked这个prop“的源码解释：

data.attrs || (data.attrs = {}))[prop] = data.model.value。

获取到<base-checkbox>组价的v-model="lovingVue"中lovingVue的值，并且将v-model的longVue传入props的checked。若对如何获取v-model中的值有不理解，具体可以看上文第一部分vue v-model源码分析（vue如何获取v-mode的值（value））。

"同时当组件触发一个change事件并且附带了一个新值的时候，lovingVue的值会被更新。"的源码解释：


通过el.model = {... callback: }和const callback = data.model.callback可以推断出：el.on.change = callback，而这个callback又是genAssignmentCode，在genAssignmentCode中会对v-model的值进行set。若是对如何set v-model的值有疑问，可以查看上文中的vue v-model源码分析（vue如何设置v-mode的值（value））。


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
}

源码地址：shared/util.js 97~100行


参考资料：


https://cn.vuejs.org/v2/guide...

https://developer.mozilla.org...

https://developer.mozilla.org...


文章标签：
JavaScript
关键词：
v-model VUE.js
vue v-model VUE.js
VUE.js v-model
VUE.js如何理解
趁你还年轻233
目录
相关文章
光明顶阳顶天
|
2月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
在使用`v-model`处理自定义组件双向数据绑定时，要仔细考虑各种因素，确保数据的准确传递和更新，同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循，能够更好地发挥`v-model`的优势，实现高效的双向数据绑定效果。
光明顶阳顶天
139 64
光明顶阳顶天
|
2月前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
总的来说，Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进，使其更适应现代前端开发的需求和趋势。但需要注意的是，在迁移过程中可能需要对一些代码进行调整和适配。
光明顶阳顶天
114 60
阿里巴巴叫我来巡山
|
12天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
96 17
小宋1021
|
1天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
小宋1021
25 1
mao29955
|
2月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
Web 组件化是一种有效的开发方法，可以提高项目的质量、效率和可维护性。在实际项目中，要结合项目的具体情况，合理应用 Web 组件化的理念和技术，实现项目的成功实施和交付。通过不断地探索和实践，将 Web 组件化的优势充分发挥出来，为前端开发领域的发展做出贡献。
mao29955
38 8
mao29955
|
2月前
|
存储 JavaScript 数据管理
除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
需要注意的是，在实际开发中，应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时，要综合考虑代码的可读性、可维护性和性能等因素，以确保系统的稳定和高效运行。
mao29955
32 1
mao29955
|
2月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性，在处理一些复杂的组件间通信问题时，可以提供一种灵活的解决方案。通过合理使用它们，可以帮助我们更好地避免`v-model`的循环引用问题，提高代码的质量和可维护性。
mao29955
41 1
光明顶阳顶天
|
2月前
|
JavaScript
在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
需要注意的是，在实际开发中，根据具体的业务需求和组件设计，可能需要对上述步骤进行适当的调整和优化，以确保双向数据绑定的正确性和稳定性。同时，深入理解 Vue 3 的响应式机制和组件通信原理，将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
光明顶阳顶天
52 2
程序员彭于晏
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
36 1
程序员彭于晏
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
46 0

热门文章

最新文章

  • 1
    Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
  • 2
    Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
  • 3
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
  • 4
    在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
  • 5
    Vue3中使用provide/inject来避免v-model的循环引用
  • 6
    Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
  • 7
    除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
  • 8
    vue3使用pinia中的actions，需要调用接口的话
  • 9
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 10
    vue中如何获取到当前位置的天气
  • 1
    使用Vue.js构建交互式前端的技术探索
    92
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    171
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    135
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    153
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    200
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    116
  • 7
    vue3中使用动态组件
    112
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    147
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    77
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    128

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)