v-model

Vue2中提供了两种双向绑定的方式

  • v-model
  • .sync

但在Vue3中，去掉了.sync修饰符，仅保留了v-model。

为了能让v-model针对多个属性进行双向绑定。

  • 对自定义组件使用v-model时，由value变为modelValue，事件由input变为update:modelValue。 ```vue 

  1. 在vue2中，v-model实际上是一个语法糖，它本质上是通过v-bind绑定了一个值，然后通过input事件对这个数据重新赋值。<br />这就是为什么在[**官方案例**](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)中，需要给子组件一个props，并且监听一个事件的原因。
  3. 在Vue3中，可以用v-model绑定多个参数。
  4. ```vue
  5. <MyComp :modelValue="title" @update:modelValue="title = $event"></MyComp>
  6. <MyComp v-model="title"></MyComp>

以上两句是等价的，在vue3中，如果没有在v-model后添加参数，则默认绑定的是modelValue。如果需要绑定其他数据，则将modelValue改为需要绑定的数据。

  1. <MyComp :content="pageContent" @update:content="pageContent = $event"></MyComp>
  2. <MyComp v-model:content="pageContent"></MyComp>

  • 允许自定义修饰符

    1. <Comp v-model.cap="data1" v-model:title.cap="data2"></Comp>

    以上代码中分别绑定了两个数据，同时在v-model上添加了自定义修饰符.cap。

  • v-if的优先级比v-for高

Vue2中，使用v-if、v-else-if和v-else时，如果切换分支时，分支中的组件数据在切换后不会重置，还保持着另一个分支的数据。如果在Vue2中解决这个问题，就要手动给每个分支加一个key。
在Vue3中则解决了这个问题，vue会自动加key。

Vue3中组件不需要必须给一个根节点，如果是多个节点，会自动在外层套一个根节点。