vue for实现

在Vue中，v-for指令用于渲染基于源数据的列表或对象。以下是详细使用方法及注意事项：

基本数组渲染

语法格式为item in items或(item, index) in items：

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

需为每项提供唯一的:key，通常使用ID等唯一标识符。

对象迭代

可遍历对象的属性，格式为(value, key, index) in object：

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

范围迭代

可渲染固定次数模板：

<span v-for="n in 10">{{ n }}</span>

性能优化建议

避免与v-if同时使用在同一元素上。如需条件过滤，应使用计算属性预处理数据：

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

动态组件渲染

结合<component>实现动态组件列表：

<component
  v-for="(item, index) in items"
  :key="item.id"
  :is="item.componentType"
/>

过渡动画

配合<transition-group>实现列表动画：

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

注意事项

1. 始终为v-for提供:key，除非迭代的是简单原始值
2. 避免直接修改迭代的数组，应使用Vue.set或数组变更方法
3. 嵌套v-for时，确保每层都有独立:key