从vue2到vue3，自定义组件的v-model实现原理

前言

相信使用vue开发的同学应该都体会过v-model的便利，它可以非常方便地进行双向数据绑定，只要重新输入内容，视图就会立刻发生改变。本文将着重介绍如何在自定义组件当中使用v-model，以及在vue2和vue3中使用方式上的差异。

概述

v-model是一个语法糖，它在组件使用时相当于如下简写：

// vue2 原生组件
<input v-model="val" />
// 等价于
<input :value="val" @input="val = $event.target.value" />

要让组件的v-model生效，需要接收一个value属性，并在有新的value时触发input事件。以上面代码为例，绑定value属性到名为val的响应式对象，然后在input触发的时候绑定一个函数，每次input的值改变就会更新val，从而实现数据更新。

vue2实现方式

同理，自定义组件要如何支持v-model？先说说vue2的实现思路：

// vue2 自定义组件
<my-component v-model="val" />
// 等价于
<my-component :value="val" @input="val = arguments[0]" />

在MyComponent这个组件上面创建一个v-model，它的实际执行就是value的属性，之后触发input的事件，value接收的值就是事件回调函数的第一个参数。所以在自定义组件中实现事件绑定，我们需要使用$emit去触发input事件。

// MyComponent.vue
<template>
  <input type="text" :value="value" @input="updateInput" />
</template>

<script>
export default {
  props: {
    value: String,
  },
  methods: {
    updateInput(e) {
      this.$emit("input", e.target.value);
    },
  },
};
</script>

以上是常规组件的实现方法，那么面对一些不同寻常的组件又该如何应对呢？

用vue2的方式实现数据绑定的解决方案会出现这么一个问题：vue2的普通组件会默认使用value的属性名和input的事件。但是当在如checked这种单选框、复选框等类型的输入控件可能会将value属性用于不同的目的，不能用来指代当前的状态。如下在使用的属性是checked而非value来表示是否选中，改变的值使用的事件是change而非input，针对这种不走寻常路的组件，vue2的解决方案是添加一个model字段，里面有两个属性，prop表示想要绑定的属性，event表示触发事件的名称。

// BaseCheckbox.vue
<template>
  <input type="checkbox" :checked="checked" @change="updateInput">
</template>

<script>
export default {
  props: {
    checked: Boolean
  },
  model: {
    prop: 'checked',
    event: 'change'
  },
  methods: {
    updateInput(e) {
      this.$emit('change', e.target.checked)
    }
  }
}
</script>

// App.vue
<template>
  <div id="app">
    <my-component v-model="val"></my-component>
    <base-checkbox v-model="checked"></base-checkbox>
    <h1>{{ val }}</h1>
    <h1>{{ checked }}</h1>
  </div>
</template>

<script>
import MyComponent from "./components/MyComponent";
import BaseCheckbox from "./components/BaseCheckbox";

export default {
  name: "App",
  components: {
    MyComponent,
    BaseCheckbox,
  },
  data() {
    return {
      val: '',
      checked: false
    }
  }
};
</script>

vue3实现方式

那么vue2的实现方式是否已经完美的呢？显然不是，它还有以下明显的缺点：

• 繁琐：需要新建model属性
• 只能支持一个v-model：组件中可能会出现需要使用多个v-model双向绑定的场景
• 理解困难：在不同的应用场景（如input输入框和check复选框）需要使用不同的方式

针对这些问题，vue3也给出了新的解决方案：

// vue3
<my-component v-model="foo" />
h(Comp, {
	modelValue: foo,
	'onUpdate:modelValue': value => (foo = value)
})

直接移除了组件上的model属性，不再使用value和input这两个非常容易混淆的属性和事件，换成了属性名称modelValue和更加详细的事件名称onUpdate:modelValue，换言之，要在vue3的自定义组件中使用v-model，首先需要有modelValue属性，然后需要在更新的时候触发onUpdate:modelValue事件。以下是vue3改造后的代码：

// App.vue
<template>
  <div id="app">
    <my-component v-model="inputVal"></my-component>
    <base-checkbox v-model="checkVal"></base-checkbox>
    <h1>{{ inputVal }}</h1>
    <h1>{{ checkVal }}</h1>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import MyComponent from "./components/MyComponent";
import BaseCheckbox from "./components/BaseCheckbox";
export default defineComponent({
  components: {
    MyComponent,
    BaseCheckbox,
  },
  setup() {
    const inputVal = ref("test");
    const checkVal = ref(false);
    return {
      inputVal,
      checkVal,
    };
  },
});
</script>

// MyComponent.vue
<template>
  <input type="text" :value="inputRef.val" @input="updateInput" />
</template>

<script>
import { defineComponent, reactive } from "vue";
export default defineComponent({
  props: {
    modelValue: String,
  },
  setup(props, context) {
    const inputRef = reactive({
      val: props.modelValue || "",
    });
    const updateInput = (e) => {
      const targetVal = e.target.value;
      inputRef.val = targetVal;
      context.emit("update:modelValue", targetVal);
    };
    return {
      inputRef,
      updateInput,
    };
  },
});
</script>

// BaseCheckbox.vue
<template>
  <input type="checkbox" :checked="checkedRef.val" @change="updateCheck" />
</template>

<script>
import { defineComponent, reactive } from "vue";
export default defineComponent({
  props: {
    checkedValue: Boolean,
  },
  setup(props, context) {
    const checkedRef = reactive({
      val: props.checkedValue,
    });
    const updateCheck = (e) => {
      const targetVal = e.target.checked;
      checkedRef.val = targetVal;
      context.emit("update:modelValue", targetVal);
    };
    return {
      checkedRef,
      updateCheck,
    };
  },
});
</script>

结语

本文讲述了v-model的原理、以及在vue2和vue3中的实现方式，代码的验证可以在codesandbox上来去进行，可以直接选择vue2或者vue3的运行环境，无需本地配置。