X
XiaoSong
V1
2023/02/03阅读:17主题:默认主题
列表渲染三
通过 key 管理状态
当使用
v-for
渲染的列表要改变时,Vue 默认按照就地更新的策略来跟新。所谓的就地更新就是不改变dom的顺而是就地更新dom的内容,从而提高渲染的性能,虽然这种模式性能优越但是有些场景并不适用,关于就地更新后续的会出一期专门的讲解。key
值是唯一标识,一般使用的是数据中的id
,不建议使用index
,因为这和不使用key
没区别,下一期会讲到。这里讲一下简单的写法:
<!-- 这里的key使用的是item.id -->
<div class="item" v-for="item in dataList" :key="item.id">
{{ item.name }}
</div>
const dataList = ref([
{name: 'Xiaomi', price: 4999, goodsId: '10', goodsClass: [/* .... */]},
{name: 'apple', price: 6999, goodsId: '18', goodsClass: [/* .... */]}
])
组件上使用 v-for
如果你还不了解组件相关的概念,这一段的内容建议当中了解。在组件上使用
v-for
和一般的方式一样,注意要带上key
。
<!-- 一个自定义的组件`ForComponent` -->
<ForComponent
v-for="(item, index) in dataList"
:key="item.goodsId"
:index="index"
:name="item.name"
/>
以上代码中,:index="index"
和:name="item.name"
是一种传递给子组件数据的方式:props
,后续内容会讲到。
作者介绍
X
XiaoSong
V1