vue3-模板中的变化

v-model

vue2比较让人诟病的一点就是提供了两种双向绑定：v-model和.sync，在vue3中，去掉了.sync修饰符，只需要使用v-model进行双向绑定即可。

为了让v-model更好的针对多个属性进行双向绑定，vue3作出了以下修改

• 当对自定义组件使用v-model指令时，绑定的属性名由原来的value变为modelValue，事件名由原来的input变为update:modelValue

  
  <ChildComponent :value="pageTitle" @input="pageTitle = $event" />
  
  <ChildComponent v-model="pageTitle" />
  
  
  <ChildComponent
    :modelValue="pageTitle"
    @update:modelValue="pageTitle = $event"
  />
  
  <ChildComponent v-model="pageTitle" />
  

• 去掉了.sync修饰符，它原本的功能由v-model的参数替代

  
  <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
  
  <ChildComponent :title.sync="pageTitle" />
  
  
  <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
  
  <ChildComponent v-model:title="pageTitle" />
  

• model配置被移除

• 允许自定义v-model修饰符

  vue2 无此功能

  

v-if v-for

v-if 的优先级 现在高于 v-for

key

• 当使用