vue3-模板中的变化-Toy模板网

这篇具有很好参考价值的文章主要介绍了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