Vue `v-model`指令的底层实现：属性绑定与事件监听的语法糖转换 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue `v-model` 的底层实现：属性绑定与事件监听的语法糖转换

大家好，今天我们来深入探讨 Vue 中 v-model 指令的底层实现机制。v-model 是 Vue 中用于实现双向数据绑定的一个非常方便的语法糖，它简化了表单元素与组件数据的同步过程。理解 v-model 的原理，能够帮助我们更好地理解 Vue 的数据绑定机制，并能更灵活地使用和扩展它。

`v-model` 的基本概念

v-model 指令用于在表单输入元素或自定义组件上创建双向数据绑定。这意味着当表单元素的值发生改变时，组件的数据也会随之更新；反之，当组件的数据发生改变时，表单元素的值也会相应更新。

例如，一个简单的文本输入框使用 v-model 的例子如下：

<template>
  <div>
    <input type="text" v-model="message">
    <p>输入的值：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

在这个例子中，input 元素的 value 属性与组件的 message 数据属性进行了双向绑定。当用户在输入框中输入内容时，message 的值会同步更新；反之，如果在组件的 data 中修改了 message 的值，输入框中的内容也会随之改变。

`v-model` 的语法糖展开

v-model 本质上是一个语法糖，它实际上是属性绑定 (:value) 和事件监听 (@input) 的组合。对于上面的例子，v-model="message" 可以展开为以下形式：

<template>
  <div>
    <input type="text" :value="message" @input="message = $event.target.value">
    <p>输入的值：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

这里，:value="message" 将输入框的 value 属性绑定到组件的 message 数据属性。@input="message = $event.target.value" 监听输入框的 input 事件，并在事件触发时，将输入框的 value 值更新到组件的 message 数据属性。$event 是事件对象，$event.target 指向触发事件的 DOM 元素，$event.target.value 则是输入框的当前值。

不同表单元素与 `v-model` 的交互

v-model 可以用于多种表单元素，但它与不同表单元素的交互方式略有不同。

1. `input[type="text"]` 和 `textarea`

对于 input[type="text"] 和 textarea 元素，v-model 绑定的是 value 属性，监听的是 input 事件。

<template>
  <div>
    <input type="text" v-model="textValue">
    <textarea v-model="textareaValue"></textarea>
    <p>Text Input: {{ textValue }}</p>
    <p>Textarea: {{ textareaValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textValue: '',
      textareaValue: ''
    }
  }
}
</script>

2. `input[type="checkbox"]`

对于 input[type="checkbox"] 元素，v-model 的行为取决于 checkbox 是否有 value 属性。

单个复选框： 当只有一个复选框时，v-model 绑定的是 checked 属性，监听的是 change 事件。

<template>
  <div>
    <input type="checkbox" v-model="isChecked">
    <p>Checked: {{ isChecked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  }
}
</script>

多个复选框： 当有多个复选框绑定到同一个数组时，每个复选框都需要一个 value 属性。v-model 仍然绑定 checked 属性，监听 change 事件。当复选框被选中时，它的 value 会被添加到数组中；当复选框被取消选中时，它的 value 会从数组中移除。

<template>
  <div>
    <input type="checkbox" value="apple" v-model="checkedFruits">苹果
    <input type="checkbox" value="banana" v-model="checkedFruits">香蕉
    <input type="checkbox" value="orange" v-model="checkedFruits">橙子
    <p>Checked Fruits: {{ checkedFruits }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedFruits: []
    }
  }
}
</script>

3. `input[type="radio"]`

对于 input[type="radio"] 元素，v-model 绑定的是 checked 属性，监听的是 change 事件。当单选框被选中时，v-model 绑定的变量会被设置为该单选框的 value 值。

<template>
  <div>
    <input type="radio" value="male" v-model="picked">男
    <input type="radio" value="female" v-model="picked">女
    <p>Picked: {{ picked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      picked: ''
    }
  }
}
</script>

4. `select`

对于 select 元素，v-model 绑定的是 value 属性，监听的是 change 事件。

<template>
  <div>
    <select v-model="selected">
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="orange">橙子</option>
    </select>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    }
  }
}
</script>

如果 select 元素设置了 multiple 属性，则 v-model 绑定的变量应该是一个数组。

<template>
  <div>
    <select v-model="selectedOptions" multiple>
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="orange">橙子</option>
    </select>
    <p>Selected Options: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: []
    }
  }
}
</script>

表格总结

表单元素	绑定属性	监听事件	备注
`input[text]`	`value`	`input`
`textarea`	`value`	`input`
`input[checkbox]`	`checked`	`change`	单个复选框绑定布尔值，多个复选框绑定数组，每个复选框需要 `value` 属性。
`input[radio]`	`checked`	`change`	每个单选框需要 `value` 属性。
`select`	`value`	`change`	单选 `select` 绑定单个值，多选 `select` (multiple) 绑定数组。

在自定义组件中使用 `v-model`

v-model 也可以用于自定义组件，但我们需要显式地指定组件接收的 prop 和触发的 event。默认情况下，v-model 期望组件接收一个名为 value 的 prop，并触发一个名为 input 的事件。

例如，我们可以创建一个自定义的输入框组件：

// MyInput.vue
<template>
  <div>
    <input type="text" :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: ['value'],
  emits: ['input']
}
</script>

然后，我们可以在父组件中使用 v-model 来绑定这个自定义组件：

// ParentComponent.vue
<template>
  <div>
    <MyInput v-model="message"></MyInput>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
import MyInput from './MyInput.vue'

export default {
  components: {
    MyInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

在这个例子中，v-model="message" 实际上展开为：

<MyInput :value="message" @input="message = $event"></MyInput>

自定义 `v-model` 的 `prop` 和 `event` 名称

从 Vue 3 开始，我们可以使用 modelValue 作为默认的 prop，并使用 update:modelValue 作为默认的事件名。Vue 3 还引入了 v-model 的参数，允许我们自定义 v-model 绑定的 prop 和 event 名称。

例如，我们可以创建一个自定义组件，使用 title 作为 prop，change-title 作为事件名：

// MyComponent.vue
<template>
  <div>
    <input type="text" :value="title" @input="$emit('change-title', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: ['title'],
  emits: ['change-title']
}
</script>

然后，在父组件中使用 v-model 的参数来指定 prop 和 event 名称：

// ParentComponent.vue
<template>
  <div>
    <MyComponent v-model:title="myTitle"></MyComponent>
    <p>Title: {{ myTitle }}</p>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      myTitle: ''
    }
  }
}
</script>

在这个例子中，v-model:title="myTitle" 实际上展开为：

<MyComponent :title="myTitle" @change-title="myTitle = $event"></MyComponent>

这种方式使得 v-model 更加灵活，可以适应各种自定义组件的需求。

多个 `v-model` 绑定

从 Vue 3.1 开始，一个组件可以同时拥有多个 v-model 绑定。每个 v-model 绑定都可以指定不同的 prop 和 event 名称。这在需要同时控制组件的多个状态时非常有用。

例如，我们可以创建一个自定义组件，同时控制 title 和 content：

// MyComponent.vue
<template>
  <div>
    <label>Title: <input type="text" :value="title" @input="$emit('update:title', $event.target.value)"></label>
    <label>Content: <textarea :value="content" @input="$emit('update:content', $event.target.value)"></textarea></label>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    content: String
  },
  emits: ['update:title', 'update:content']
}
</script>

然后，在父组件中同时使用多个 v-model 绑定：

// ParentComponent.vue
<template>
  <div>
    <MyComponent v-model:title="myTitle" v-model:content="myContent"></MyComponent>
    <p>Title: {{ myTitle }}</p>
    <p>Content: {{ myContent }}</p>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      myTitle: '',
      myContent: ''
    }
  }
}
</script>

`v-model` 的底层实现原理

虽然我们已经了解了 v-model 的语法糖展开形式，但它的底层实现原理涉及到 Vue 的数据绑定系统和模板编译过程。

模板编译： Vue 的模板编译器会将包含 v-model 指令的模板转换为渲染函数。在转换过程中，v-model 指令会被解析为属性绑定和事件监听的组合。
数据绑定： Vue 的数据绑定系统会建立起表单元素与组件数据之间的依赖关系。当组件数据发生改变时，数据绑定系统会更新表单元素的 value 属性。
事件监听： Vue 的事件监听系统会监听表单元素的 input 或 change 事件。当事件触发时，事件处理函数会将表单元素的 value 值更新到组件数据中。
响应式更新: Vue 的响应式系统会追踪v-model绑定的数据变化，当数据变化时，会触发视图的重新渲染，从而更新表单元素的值，反之亦然。

总的来说，v-model 的底层实现依赖于 Vue 的模板编译、数据绑定和事件监听机制的协同工作。

总结

v-model 是 Vue 中一个强大的双向数据绑定指令，它通过属性绑定和事件监听的组合，简化了表单元素与组件数据的同步过程。理解 v-model 的语法糖展开形式，以及它与不同表单元素的交互方式，能够帮助我们更好地使用和扩展 v-model。同时，理解 v-model 的底层实现原理，能够帮助我们更深入地理解 Vue 的数据绑定机制。v-model极大简化了双向数据绑定的代码，提高开发效率。

更多IT精英技术系列讲座，到智猿学院

Vue v-model 的底层实现：属性绑定与事件监听的语法糖转换

v-model 的基本概念

v-model 的语法糖展开

不同表单元素与 v-model 的交互

1. input[type="text"] 和 textarea

2. input[type="checkbox"]

3. input[type="radio"]

4. select

表格总结

在自定义组件中使用 v-model

自定义 v-model 的 prop 和 event 名称

多个 v-model 绑定

v-model 的底层实现原理

总结

发表回复 取消回复