vue2和vue3的v-model用法区别

vue2中：

表单输入绑定即v-model

 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
 它会根据控件类型自动选取正确的方法来更新元素。
 尽管有些神奇，但 v-model 本质上不过是语法糖。
 它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

自定义组件的v-model(2.2.0+ 新增)

HTML 原生的输入元素类型并不总能满足需求。幸好，Vue 的组件系统允许你创建具有完全自定义行为且可复用的输入组件。这些输入组件甚至可以和 v-model 一起使用！

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

现在在这个组件上使用 v-model 的时候：(2.2.0+ 新增)

<base-checkbox v-model="lovingVue"></base-checkbox>

去除语法糖后是：
<base-checkbox :checked"lovingVue" @change="lovingVue = $event"></base-checkbox>

 这里的 lovingVue 的值将会传入这个名为 checked 的 prop。
 同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。

注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。注意vue2中的v-model后面是不能跟值的，虽然默认会绑定一个值。比如v-model:show=“show”。我们在一些ui框架（vant）中可能见到这样的写法，注意这里可能是ui对应vue3版本的写法。切换到vue2对应的版本就不带了

vue3

默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。我们可以通过给 v-model 指定一个参数来更改这些名字：

<MyComponent v-model:title="bookTitle" />

在这个例子中，子组件应声明一个 title prop，并通过触发 update:title 事件更新父组件值：

<!-- MyComponent.vue -->
<script setup>
defineProps(['title'])
defineEmits(['update:title'])
</script>

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

我们一般开发中不经常用上面的写法，反而是分开写更多，因为分开写的话，我们可以直接在事件监听后面跟上一个函数，MyComponent 的应用变为了：

<MyComponent :title="bookTitle" @update:title="(val) => { bookTitle = val; ...//做一些其他的操作}" />

v-model prop 和事件默认名称更改

vue3省略了model的声明。

<!-- vue2 -->
<ChildComponent v-model="pageTitle" />
<!-- 简写: -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

<!-- vue3 -->
<ChildComponent v-model="pageTitle" />
<!-- 简写: -->
<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"/>
如果不是使用默认参数modelValue
<ChildComponent v-model:title="pageTitle" />
<!-- 简写: -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />