vue实现检测数组

Vue 中检测数组变化的方法

Vue 通过响应式系统自动追踪数组变化，但需要注意某些数组操作无法触发视图更新。以下是几种实现数组检测的方法：

使用 Vue 的响应式方法

Vue 对以下数组方法进行了包裹，调用时会触发视图更新：

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

methods: {
  addItem() {
    this.items.push(newItem) // 自动触发更新
  }
}

直接修改数组索引的问题

通过索引直接修改数组元素不会触发更新：

// 不会触发更新
this.items[index] = newValue

解决方案：

1. 使用 Vue.set 或 this.$set

   this.$set(this.items, index, newValue)

2. 使用 splice 方法

   this.items.splice(index, 1, newValue)

检测数组长度变化

直接修改 .length 不会触发更新：

// 不会触发更新
this.items.length = newLength

应使用 splice：

this.items.splice(newLength)

使用 watch 监听数组

可以深度监听数组变化：

watch: {
  items: {
    handler(newVal, oldVal) {
      // 数组变化处理
    },
    deep: true
  }
}

使用 computed 属性

通过计算属性派生数组状态：

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

注意事项

1. 使用 Object.freeze() 冻结的数组会失去响应性
2. 替换整个数组会触发更新：

   // 会触发更新
   this.items = newArray

3. 嵌套数组需要使用深度监听或确保内部数组也是响应式的

通过合理使用这些方法，可以确保 Vue 正确检测和响应数组变化。