vue怎样实现列表循环
在 Vue 中实现列表循环
Vue 提供了 v-for 指令来实现列表循环，可以遍历数组或对象，并为每个元素生成对应的 DOM 节点。
遍历数组
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: ['苹果', '香蕉', '橙子']
}
}
}
</script>遍历对象
<template>
<ul>
<li v-for="(value, key, index) in user" :key="key">
{{ index }}. {{ key }}: {{ value }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
user: {
name: '张三',
age: 25,
gender: '男'
}
}
}
}
</script>使用 key 的重要性
为每个循环项添加唯一的 key 属性可以帮助 Vue 高效地更新 DOM。理想情况下，key 应该是数据中的唯一标识符，而不是数组索引。
<template>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
</template>在组件中使用 v-for
当在组件上使用 v-for 时，必须使用 key 属性，并且数据需要通过 props 传递给子组件。
<template>
<div>
<user-item
v-for="user in users"
:key="user.id"
:user="user"
/>
</div>
</template>
<script>
import UserItem from './UserItem.vue'
export default {
components: {
UserItem
},
data() {
return {
users: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' }
]
}
}
}
</script>性能优化技巧
对于大型列表，可以考虑使用虚拟滚动技术，如 vue-virtual-scroller 插件，只渲染可视区域内的元素。
<template>
<RecycleScroller
class="scroller"
:items="largeList"
:item-size="50"
key-field="id"
v-slot="{ item }"
>
<div class="user">
{{ item.name }}
</div>
</RecycleScroller>
</template>
<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
export default {
components: {
RecycleScroller
},
data() {
return {
largeList: [...]
}
}
}
</script>数组变更检测
Vue 可以检测到以下数组方法触发的变更：
push()pop()shift()unshift()splice()sort()reverse()
对于非变更方法（如 filter()、concat() 和 slice()），可以用新数组替换旧数组：
this.items = this.items.filter(item => item.isActive)注意事项
避免在同一元素上同时使用 v-if 和 v-for。如果需要条件渲染，可以在外层使用 template 标签：
<template v-for="item in items">
<li v-if="item.isActive" :key="item.id">
{{ item.name }}
</li>
</template>
