与vue2有什么不同？

最大的不同就是用法，vue2的用法主要是绑定了value，如果想绑定别的属性可能需要用到别的方法，比较绕。具体vue2的v-model用法看这：表单与v-model

vue3与vue2同样的，都是某种写法的语法糖，而vue3在使用v-model如下：

v-model是语法糖

vue2的用法

  1. <MyInput v-model="user.name"/>
  2. //等价写法
  3. <MyInput :value="user.name" @input="user.name = $event"/>

如果想要改变别的属性，而不是value，就可以在子组件下添加一个model：

  1. //MyInput.vue
  2. export default {
  3.     model: {
  4.       prop: 'title',
  5.     event: 'change'
  6.   }
  7. }

那么v-model改变就变成如下：

  1. <MyInput :title="user.name" @change="user.name = $event"/>

并且，如果想使用双向绑定，那么就需要使用.sync，例如：

  1. //MyInput.vue
  2. this.$emit('update:title','子组件触发')

然后父组件监听这个事件：

  1. <MyInput :title="user.name" @updata:title="user.name = $event"/>

就可以简化成如下：

  1. <MyInput :title.sync="user.name"/>

vue3的用法

看起来vue2用起来有点麻烦呀，新人一开始会被绕晕的，所以，vue3做了更方便的用法。

用法：

  1. <MyInput v-model="user.name"/>
  2. //等价写法
  3. <MyInput :modelvalue="user.name" @update:modelValue="user.name = $event"/>

首先，很明显的是vue2的:value变成vue3:modelvalue，vue2的@input变成vue3@update:modelValue。可以看出来，已经不是必须和value绑定了，而且，若想绑定别的属性，直接给v-model传个参数就可以了，如下：

  1. <MyInput v-model:title="user.name"/>
  2. //等价写法
  3. <MyInput :title="user.name" @update:title="user.name = $event"/>

这样的写法直接省略了组件内声明一个选项，十分方便。、

而且，同一个组件里，可以使用多个v-model，如下：

  1. <MyInput v-model:title="user.name" v-model:content="info"/>
  2. //等价写法
  3. <MyInput 
  4.    :title="user.name"  @update:title="name = $event"
  5.    :content="info" @update:content="info = $event"/>

并且，该写法直接代替了.sync，所以在vue3里该修饰符已经被删除！