vue3模版中的变化

v-model

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

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

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

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

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

  <!-- vue2 -->
  <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
  <!-- 简写为 -->
  <ChildComponent :title.sync="pageTitle" />
  
  <!-- vue3 -->
  <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

• 当使用<template>进行v-for循环时，需要把key值放到<template>中，而不是它的子元素中

• 当使用v-if v-else-if v-else分支的时候，不再需要指定key值，因为vue3会自动给予每个分支一个唯一的key

  即便要手工给予key值，也必须给予每个分支唯一的key，不能因为要重用分支而给予相同的key

Fragment

vue3现在允许组件出现多个根节点