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

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

一、基本概念

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

二、代码示例解析

<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. 遍历数组

<element v-for="(item, index) in array" :key="uniqueId">
   {{ index }}: {{ item }}
</element>

2. 遍历对象

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

3. 遍历字符串

<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

<!-- 推荐 -->
<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. 范围迭代

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

2. 组件中使用

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

3. 过滤/排序列表

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 中不推荐同一元素使用两者
   • 解决方案：

     <template v-for="item in items">
       <div v-if="item.isVisible" :key="item.id">
         {{ item.name }}
       </div>
     </template>
     

3. 如何获取当前元素？

   • 通过事件传递：

     <div v-for="item in items" @click="handleClick(item)">