列表渲染三

通过 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，后续内容会讲到。