vue-java-tutorials/vue2-tutorials/import-script/10-列表渲染.md

# Vue2 列表渲染（v-for）详解文档

## 一、基本概念

Vue2 中的 `v-for` 指令用于基于源数据多次渲染元素或模板块。它可以遍历数组、对象和字符串，是构建动态列表的核心指令。

## 二、代码示例解析

```html
<div id="app">
    <!-- 遍历数组 -->
    <ul>
        <li v-for="(item, index) in list" :key="item.id">
            {{item}}--{{item.name}}--{{index}}
        </li>
    </ul>
    
    <!-- 遍历对象 -->
    <ul>
        <li v-for="(value, key, index) of person" :key="key">
            {{value}}--{{key}}--{{index}}
        </li>
    </ul>
</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            list: [
                { id: 1, name: "1" },
                { id: 2, name: "2" },
                { id: 3, name: "3" },
                { id: 4, name: "4" }
            ],
            person: {
                name: "Bunny",
                age: 16
            }
        }
    });
</script>
```

## 三、核心语法

### 1. 遍历数组
```html
<element v-for="(item, index) in array" :key="uniqueId">
   {{ index }}: {{ item }}
</element>
```

### 2. 遍历对象
```html
<element v-for="(value, key, index) in object" :key="key">
   {{ index }}. {{ key }}: {{ value }}
</element>
```

### 3. 遍历字符串
```html
<element v-for="(char, index) in string" :key="index">
   {{ index }}: {{ char }}
</element>
```

## 四、关键特性

| 特性      | 说明             | 示例                    |
| --------- | ---------------- | ----------------------- |
| `in`/`of` | 两种语法等效     | `v-for="item in items"` |
| 索引参数  | 可选的第二个参数 | `(item, index)`         |
| `:key`    | 必须的唯一标识   | `:key="item.id"`        |
| 嵌套循环  | 支持多层嵌套     | 嵌套使用 `v-for`        |

## 五、最佳实践

### 1. 正确的 key 使用
- **必须**为每个节点提供唯一的 `key` 属性
- **避免**使用索引作为 key（当列表会变化时）
- **理想** key 应该是数据中的唯一 ID

```html
<!-- 推荐 -->
<li v-for="item in items" :key="item.id">

<!-- 不推荐 -->
<li v-for="(item, index) in items" :key="index">
```

### 2. 性能优化
- 对大列表使用虚拟滚动（如 vue-virtual-scroller）
- 避免在 `v-for` 中使用复杂表达式
- 必要时使用 `v-if` 和 `v-for` 分离（Vue2 中 `v-for` 优先级更高）

### 3. 数组更新检测
Vue 能检测以下数组方法的变化：
- `push()`
- `pop()`
- `shift()`
- `unshift()`
- `splice()`
- `sort()`
- `reverse()`

## 六、高级用法

### 1. 范围迭代
```html
<span v-for="n in 10">{{ n }} </span>
```

### 2. 组件中使用
```html
<my-component 
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id">
</my-component>
```

### 3. 过滤/排序列表
```javascript
computed: {
    filteredItems() {
        return this.items.filter(item => item.isActive);
    },
    sortedItems() {
        return [...this.items].sort((a, b) => a.price - b.price);
    }
}
```

## 七、常见问题

1. **为什么列表不更新？**
   - 确保使用了变异方法修改数组
   - 对于非变异方法，使用新数组替换旧数组
   - 对象属性添加需要使用 `Vue.set`

2. **`v-if` 和 `v-for` 一起使用？**
   - Vue2 中不推荐同一元素使用两者
   - 解决方案：
     ```html
     <template v-for="item in items">
       <div v-if="item.isVisible" :key="item.id">
         {{ item.name }}
       </div>
     </template>
     ```

3. **如何获取当前元素？**
   - 通过事件传递：
     ```html
     <div v-for="item in items" @click="handleClick(item)">
     ```