V-Model的秘密：揭开Vue.js的输入绑定指令的面纱

2024-02-22 13:50:01

当提及到v-model时，我们都会想到它是一个语法糖，相当于在使用该指令的元素或者组件上绑定了props中的value值以及注册了input事件。但其实深入挖掘其中，可以学习到更多的东西，下面就看一下相关的Vue源码吧。

在初始化时，Vue构造函数会执行this._init，然后调用initVModel来初始化v-model。initVModel中，对不同的标签执行不同的初始化操作。例如，对于input标签，它会根据其type属性来决定绑定哪种事件处理函数。

if (this.is('input')) {
  const vtype = this.attr('type')
  if (this.is('checkbox')) {
    valueBinding = 'checked'
    value = (this.attr('checked') !== null)
  } else if (this.is('radio')) {
    valueBinding = 'checked'
    const name = this.attr('name')
    value = process.env.NODE_ENV !== 'production'
      ? this.mutableBinding.value
      : (
        this._checkboxGroup
          ? (this._checkboxGroup.some((item) => {
            return valueBinding in item
              ? item[valueBinding] === this.value
              : item.value === this.value
          }))
          : false
      )
  } else if (vtype === 'file') {
    valueBinding = 'value'
    value = this.files
  } else if (this.is('select')) {
    value = this.multiple
      ? this.selectedOptions.map((option) => {
        // cast value to string, since selectedOptions will
        // return an array of DOM elements
        return option.value || option.text
      })
      : this.selectedOptions[0].value || this.selectedOptions[0].text
  } else if (this.is('textarea') || this.is('[contenteditable=true]')) {
    valueBinding = 'value'
    value = this.value
  }
}

在数据绑定过程中，v-model使用了一个发布-订阅模式。当input元素的值发生变化时，它会触发一个input事件。这个事件由Vue侦听，并相应地更新绑定值。

this._bindInputEvents()

在_bindInputEvents方法中，Vue为input元素添加了input事件监听器。当input元素的值发生变化时，此监听器会触发一个名为handleInput的事件处理程序。

handleInput(e) {
  const target = e.target
  const value = target.value
  // normalize value for checkbox/radio
  if (target.type === 'checkbox') {
    value = target.checked
  } else if (target.type === 'radio') {
    value = this._getRadioValue(target)
  }
  this.set(value)
}