实现vue数组双向绑定
Vue 数组双向绑定实现方法
在 Vue 中，实现数组的双向绑定需要注意 Vue 的响应式系统对数组变化的检测机制。Vue 无法检测到以下数组变动：
- 直接通过索引设置数组项（如
arr[index] = newValue） - 直接修改数组长度（如
arr.length = newLength）
使用 v-model 绑定数组
对于表单元素的多选情况，可以使用 v-model 直接绑定到数组：
<template>
<div>
<input type="checkbox" id="item1" value="Item1" v-model="checkedItems">
<label for="item1">Item 1</label>
<input type="checkbox" id="item2" value="Item2" v-model="checkedItems">
<label for="item2">Item 2</label>
<p>Checked items: {{ checkedItems }}</p>
</div>
</template>
<script>
export default {
data() {
return {
checkedItems: []
}
}
}
</script>使用 Vue.set 或 this.$set
当需要直接设置数组元素时，应使用 Vue.set 或 this.$set 方法确保响应性：
// 错误方式 - 不会触发视图更新
this.items[index] = newValue;
// 正确方式
this.$set(this.items, index, newValue);
// 或
Vue.set(this.items, index, newValue);使用数组变更方法
Vue 包装了以下数组变更方法，它们会触发视图更新：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
// 这些操作会触发响应式更新
this.items.push(newItem);
this.items.splice(index, 1, newItem);使用计算属性实现复杂绑定
对于需要复杂逻辑的数组绑定，可以使用计算属性：
computed: {
filteredItems() {
return this.items.filter(item => item.active);
}
}使用 watch 监听数组变化
当需要响应数组变化执行操作时，可以使用 watch：
watch: {
items: {
handler(newVal) {
console.log('数组变化:', newVal);
},
deep: true
}
}注意事项
- 避免直接修改数组元素，应使用变异方法或 Vue.set
- 对于大型数组，考虑使用 Object.freeze() 提升性能
- 需要深度监听数组内容变化时，使用 deep: true 选项
- 在 Vue 3 中，可以使用 reactive 和 ref 更灵活地处理数组响应性
