# Vue2 列表渲染(v-for)详解文档
## 一、基本概念
Vue2 中的 `v-for` 指令用于基于源数据多次渲染元素或模板块。它可以遍历数组、对象和字符串,是构建动态列表的核心指令。
## 二、代码示例解析
```html
-
{{item}}--{{item.name}}--{{index}}
-
{{value}}--{{key}}--{{index}}
```
## 三、核心语法
### 1. 遍历数组
```html
{{ index }}: {{ item }}
```
### 2. 遍历对象
```html
{{ index }}. {{ key }}: {{ value }}
```
### 3. 遍历字符串
```html
{{ index }}: {{ char }}
```
## 四、关键特性
| 特性 | 说明 | 示例 |
| --------- | ---------------- | ----------------------- |
| `in`/`of` | 两种语法等效 | `v-for="item in items"` |
| 索引参数 | 可选的第二个参数 | `(item, index)` |
| `:key` | 必须的唯一标识 | `:key="item.id"` |
| 嵌套循环 | 支持多层嵌套 | 嵌套使用 `v-for` |
## 五、最佳实践
### 1. 正确的 key 使用
- **必须**为每个节点提供唯一的 `key` 属性
- **避免**使用索引作为 key(当列表会变化时)
- **理想** key 应该是数据中的唯一 ID
```html
```
### 2. 性能优化
- 对大列表使用虚拟滚动(如 vue-virtual-scroller)
- 避免在 `v-for` 中使用复杂表达式
- 必要时使用 `v-if` 和 `v-for` 分离(Vue2 中 `v-for` 优先级更高)
### 3. 数组更新检测
Vue 能检测以下数组方法的变化:
- `push()`
- `pop()`
- `shift()`
- `unshift()`
- `splice()`
- `sort()`
- `reverse()`
## 六、高级用法
### 1. 范围迭代
```html
{{ n }}
```
### 2. 组件中使用
```html
```
### 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
{{ item.name }}
```
3. **如何获取当前元素?**
- 通过事件传递:
```html
```