vue实现数组

Vue 中数组的实现方法

在 Vue 中，数组的操作需要特别注意响应式更新。Vue 对数组的变异方法进行了封装，确保数组变化能够触发视图更新。以下是常见的数组操作方法：

响应式数组方法

Vue 封装了以下数组的变异方法，调用它们会触发视图更新：

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

示例代码：

data() {
  return {
    items: ['a', 'b', 'c']
  }
},
methods: {
  addItem() {
    this.items.push('new item') // 触发响应式更新
  }
}

非变异方法替换

对于不会改变原数组的方法（如 filter(), concat(), slice()），需要将返回的新数组赋值给原变量：

this.items = this.items.filter(item => item !== 'a')

直接索引修改问题

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

this.items[0] = 'new value' // 不会触发更新

解决方案

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

   this.$set(this.items, 0, 'new value')

2. 使用 splice 方法：

   this.items.splice(0, 1, 'new value')

数组响应式原理

Vue 通过重写数组的原型方法实现响应式。当观测一个数组时，Vue 会：

• 拦截数组的变异方法
• 在方法执行后通知依赖更新
• 对于非变异方法，需要重新赋值才能触发更新

注意事项

1. 避免直接修改数组长度：

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

2. 正确清空数组的方法：

   this.items = []
   this.items.splice(0)

3. 深层数组的响应式处理需要额外注意，必要时使用 Vue.set 或 this.$set 确保嵌套属性的响应性。