vue2 vue3 v-model 区别

在Vue 2和Vue 3中，v-model都是用来实现表单元素与组件内部数据的双向绑定的指令，但在Vue 3中，v-model有一些变化和增强。

Vue 2中的v-model

在Vue 2中，v-model主要用于表单元素的双向绑定。对于原生的HTML表单元素，如<input>、<textarea>和<select>，v-model会根据元素类型自动选取正确的方法来更新元素的值。同时，对于自定义组件，可以通过model选项来自定义v-model的行为。

Copy Code
<!-- 使用v-model双向绑定输入框的值 -->
<input v-model="message" type="text">

<!-- 自定义组件使用v-model -->
<custom-input v-model="message"></custom-input>

Vue 3中的v-model

在Vue 3中，v-model除了仍然支持表单元素的双向绑定外，还引入了v-model的可定制性。在Vue 3中，你可以通过为组件提供model选项来自定义v-model的行为，这使得在自定义组件中使用v-model更加灵活。

javascriptCopy Code
// 在自定义组件中通过model选项自定义v-model的行为
const MyComponent = {
  emits: ['update:modelValue'], // 定义事件名称
  props: {
    modelValue: String,
  },
  template: `
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
  `,
};

Copy Code
<!-- 在Vue 3中使用自定义组件并使用v-model -->
<MyComponent v-model="message"></MyComponent>

总结一下，在Vue 3中，v-model不仅仅是一个用于表单元素的简单双向绑定指令，而是一个具有更灵活、可定制的特性，使得在自定义组件中使用v-model更加方便和强大。