vue实现数组绑定
Vue 数组绑定的实现方法
Vue 提供了多种方式实现数组的响应式绑定，确保数据变化时视图自动更新。以下是常见的实现方法：
使用 v-for 指令渲染数组
通过 v-for 指令可以遍历数组并渲染列表。key 属性是必须的，用于高效更新 DOM。
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ name: 'Item 1' },
{ name: 'Item 2' }
]
}
}
}
</script>修改数组的注意事项
直接通过索引修改数组元素不会触发视图更新，需要使用 Vue 提供的变异方法或 set 方法。
// 错误方式，不会触发更新
this.items[0] = { name: 'New Item' }
// 正确方式 - 使用变异方法
this.items.splice(0, 1, { name: 'New Item' })
// 或使用 Vue.set/Vm.$set
this.$set(this.items, 0, { name: 'New Item' })数组变异方法
Vue 包装了以下数组方法，调用它们会触发视图更新：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
// 添加新元素
this.items.push({ name: 'Item 3' })
// 删除最后一个元素
this.items.pop()计算属性处理数组
计算属性可以基于数组创建派生数据，当数组变化时自动重新计算。
computed: {
filteredItems() {
return this.items.filter(item => item.active)
}
}watch 监听数组变化
可以监听整个数组或特定元素的变化。
watch: {
items: {
handler(newVal, oldVal) {
console.log('数组变化了')
},
deep: true
}
}注意事项
- 避免直接设置数组长度，如 this.items.length = 0，这不会触发更新
- 对于大型数组，考虑使用虚拟滚动优化性能
- 对象数组需要确保每个对象属性也是响应式的
