vue列表实现

Vue 列表实现方法

在 Vue 中实现列表渲染主要依赖 v-for 指令，以下是几种常见场景的实现方式：

基础列表渲染

使用 v-for 指令遍历数组，item 代表当前项，index 为可选索引值：

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }} - {{ item.name }}
  </li>
</ul>

需注意为每项添加唯一的 :key，通常使用数据中的唯一标识符。

对象遍历

v-for 也可遍历对象属性，参数顺序为 (value, key, index)：

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

组件列表渲染

在自定义组件中使用时，需显式传递数据：

<my-component
  v-for="item in items"
  :item="item"
  :key="item.id"
></my-component>

动态过滤/排序

结合计算属性实现动态过滤：

computed: {
  filteredItems() {
    return this.items.filter(item => item.active)
  }
}

性能优化

大型列表建议使用虚拟滚动技术（如 vue-virtual-scroller）：

<RecycleScroller
  :items="items"
  :item-size="50"
  v-slot="{ item }"
>
  {{ item.name }}
</RecycleScroller>

过渡动画

添加列表过渡效果：

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

需配合 CSS 过渡样式：

.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
}

注意事项

• 始终为 v-for 提供 :key，避免使用索引作为 key
• 复杂列表考虑使用虚拟滚动提升性能
• 避免在模板中进行复杂计算，使用计算属性替代
• 嵌套列表时注意组件结构合理性