实现vue数组双向绑定
Vue 数组双向绑定的实现方法
Vue 通过数据劫持和发布-订阅模式实现数据的双向绑定，但直接修改数组的某些方法（如索引赋值）无法触发视图更新。以下是实现数组双向绑定的几种方法：
使用 Vue.set 或 this.$set
Vue 无法检测直接通过索引修改数组元素，需使用 Vue.set 或实例方法 this.$set 触发响应式更新。
this.$set(this.array, index, newValue);使用数组变异方法
Vue 重写了部分数组方法（如 push, pop, splice 等），调用这些方法可触发视图更新。
this.array.splice(index, 1, newValue);使用 .sync 修饰符（Vue 2.x）
在父子组件间实现数组的双向绑定，可通过 .sync 修饰符和 $emit 更新父组件数据。
// 父组件
<child-component :array.sync="parentArray"></child-component>
// 子组件
this.$emit('update:array', newArray);使用 v-model（Vue 3 推荐）
Vue 3 支持多个 v-model 绑定，可直接实现数组的双向绑定。
// 父组件
<child-component v-model:array="parentArray"></child-component>
// 子组件
props: ['array'],
emits: ['update:array'],
methods: {
updateArray(newArray) {
this.$emit('update:array', newArray);
}
}使用 computed 和 watch
通过计算属性和监听器手动实现数组的双向绑定逻辑。
data() {
return {
internalArray: []
};
},
props: ['array'],
watch: {
array: {
immediate: true,
handler(newVal) {
this.internalArray = [...newVal];
}
},
internalArray: {
deep: true,
handler(newVal) {
this.$emit('update:array', [...newVal]);
}
}
}注意事项
- Vue 2.x 中直接通过索引修改数组（如
this.array[0] = value）不会触发更新。 - 对于嵌套数组或对象，需确保使用响应式方法修改内部属性。
- Vue 3 的响应式系统基于 Proxy，对数组操作的支持更全面，但仍推荐使用标准方法。
