Vue3 V-model 源码解析

Vue3的v-model实现与Vue2有所不同。在Vue3中，v-model被设计为一个语法糖，它基于组件的props和emits进行工作。这使得v-model在Vue3中更加灵活和可定制。

**以下是Vue3中v-model的基本工作原理：
1.当你在一个组件上使用v-model时，例如

<my-component v-model="value" />

这实际上被解析为

<my-component :modelValue="value" @update:modelValue="value = $event" />

这意味着v-model实际上是在传递一个名为modelValue的prop，并监听一个名为update:modelValue的事件

2.在组件内部，你可以通过props.modelValue来访问v-model绑定的值，并通过$emit(‘update:modelValue’, newValue)来更新它。

3.你也可以通过在组件定义中指定model选项来自定义v-model使用的prop和事件的名称。

以下是一个简单的Vue3组件，它使用v-model来实现双向数据绑定：

<template>
  <input :value="modelValue" @input="updateValue" />
</template>

<script>
export default {
  props: {
    modelValue: String
  },
  methods: {
    updateValue(event) {
      this.$emit('update:modelValue', event.target.value);
    }
  }
}
</script>

在这个例子中，当输入框的值改变时，updateValue方法会被调用，然后它会触发一个update:modelValue事件，并传递新的值。这个新的值会被自动赋值给v-model绑定的变量。