vue实现数组双向绑定

Vue 实现数组双向绑定

Vue 中实现数组的双向绑定通常使用 v-model 指令，但需要注意 Vue 对数组的响应式处理机制。以下是几种常见方法：

使用 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>
    <input type="checkbox" id="item3" value="item3" v-model="checkedItems">
    <label for="item3">Item 3</label>
    <p>Checked items: {{ checkedItems }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedItems: []
    };
  }
};
</script>

使用 Vue.set 或 this.$set 触发响应式更新

Vue 无法检测到直接通过索引修改数组或修改数组长度的情况。需要使用 Vue.set 或 this.$set 确保响应式更新。

methods: {
  updateArray(index, newValue) {
    this.$set(this.items, index, newValue);
  }
}

使用数组变异方法

Vue 对以下数组方法进行了封装，调用这些方法可以触发视图更新：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

methods: {
  addItem(newItem) {
    this.items.push(newItem);
  },
  removeItem(index) {
    this.items.splice(index, 1);
  }
}

使用计算属性实现复杂逻辑

如果需要基于数组生成派生数据，可以使用计算属性。

computed: {
  filteredItems() {
    return this.items.filter(item => item.active);
  }
}

使用 watch 监听数组变化

如果需要监听数组变化并执行特定逻辑，可以使用 watch。

watch: {
  items: {
    handler(newVal, oldVal) {
      console.log('Array changed:', newVal);
    },
    deep: true
  }
}

注意事项

• 直接通过索引修改数组（如 this.items[0] = newValue）不会触发视图更新。
• 使用 splice 或 $set 修改数组时，可以确保响应式更新。
• 对于嵌套数组或对象，需设置 deep: true 进行深度监听。