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'price4999goodsId'10'goodsClass: [/* .... */]},
    {name'apple'price6999goodsId'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,后续内容会讲到。

分类:

前端

标签:

Vue.js

作者介绍

X
XiaoSong
V1