Vue 中 v-model 属性的本质

2023-09-09 03:27:54

作为一个 Vue 开发者，您肯定对 v-model 属性非常熟悉。它允许您轻松地绑定输入元素和组件数据，从而实现双向数据流。然而，您是否曾想过 v-model 背后的原理是什么？

在这个技术指南中，我们将深入探讨 v-model 属性的内部机制，并通过一些示例代码来说明其工作原理。

`v-model` 的本质

v-model 属性是一种语法糖，它简化了以下两种常见操作：

使用 value 属性设置元素的值
使用 input 事件侦听值的更改

在没有 v-model 的情况下，您需要分别使用这两个操作来实现双向数据绑定。对于输入元素，代码如下：

<input v-bind:value="message" @input="updateMessage">

methods: {
  updateMessage(event) {
    this.message = event.target.value;
  }
}

使用 v-model，您可以简化为：

<input v-model="message">

这本质上将 v-bind:value 和 @input 行为封装在一个简洁的语法中。

`v-model` 的工作原理

当 v-model 用在输入元素上时，它会：

创建一个与该元素关联的私有属性 。该属性将保存该元素的当前值。
设置该私有属性的getter，以返回 value 属性 。
设置该私有属性的setter，以更新 value 属性和触发 input 事件 。

这意味着，当您使用 v-model 更改元素值时，该值会同时更新私有属性、value 属性和触发 input 事件。从而实现了双向数据绑定。

自定义 `v-model`

除了用于输入元素之外，v-model 还可以与自定义组件一起使用。要自定义 v-model 行为，您需要：

在组件中声明一个 model 值 。
提供一个 update:modelValue 事件来处理外部更新 。
在组件的模板中使用 v-model 属性 。

下面是一个自定义 v-model 的示例：

<template>
  <input v-model="modelValue">
</template>

<script>
export default {
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  methods: {
    updateModelValue(value) {
      this.$emit('update:modelValue', value);
    }
  }
}
</script>