数组的特殊响应处理

数组的特殊响应处理

Vue3的响应式系统基于Proxy实现，对普通对象的处理相对直观，但数组作为特殊的对象类型，存在一些需要特殊处理的场景。数组的响应式处理需要考虑性能优化和API兼容性，同时保持与Vue2相似的行为模式。

数组的响应式原理

Proxy可以拦截数组的基本操作，但某些数组方法会触发多次更新。Vue3通过重写数组的七个变异方法来优化性能：

const arrayInstrumentations = {}
;['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
  arrayInstrumentations[method] = function(...args) {
    pauseTracking()
    const res = Array.prototype[method].apply(this, args)
    resetTracking()
    return res
  }
})

这种处理方式确保每个数组方法调用只触发一次依赖更新，而不是在每次元素变更时都触发。例如当执行arr.push(1,2,3)时，Vue3只会收集一次变更，而不是三次。

索引访问的响应式处理

直接通过索引修改数组元素时，Vue3的处理方式与Vue2不同：

const arr = reactive([1, 2, 3])
arr[0] = 10 // 能触发响应

这是因为Proxy可以拦截数组的索引访问。但需要注意，当设置的索引超过当前数组长度时：

arr[100] = 100 // 不会触发响应

这种情况下需要显式使用arr.length = 101来确保响应式生效。

length属性的特殊处理

数组的length属性需要特殊处理，因为修改length会影响现有元素：

const arr = reactive([1, 2, 3])
effect(() => {
  console.log(arr.length)
})
arr.length = 1 // 触发effect

Vue3内部会跟踪length属性的访问，并在length变化时触发相关依赖。当缩短数组长度时，被删除元素的响应式关联也会被清理。

数组与ref的结合使用

在组合式API中，数组经常与ref一起使用：

const list = ref([])
list.value.push('item') // 自动触发更新

ref内部会对数组进行响应式包装，但需要注意.value的访问。Vue3对此做了优化，使得模板中可以直接使用ref数组而不需要.value：

<template>
  <div v-for="item in list" :key="item">{{ item }}</div>
</template>

多维数组的响应式处理

对于多维数组，Vue3会递归地将其转换为响应式对象：

const matrix = reactive([
  [1, 2],
  [3, 4]
])
matrix[0][1] = 5 // 能触发响应

内部实现上，Vue3会在访问子数组时自动进行响应式转换：

function createReactiveArray(arr) {
  return new Proxy(arr, {
    get(target, key) {
      const res = Reflect.get(target, key)
      if (typeof res === 'object' && res !== null) {
        return reactive(res)
      }
      return res
    }
  })
}

数组与watch的配合

观察数组时需要注意引用变化和内容变化的区别：

watch(
  () => [...arr],
  (newVal, oldVal) => {
    // 深度比较数组内容
  },
  { deep: true }
)

对于大型数组，直接观察可能导致性能问题。Vue3提供了更高效的观察方式：

watch(
  arr,
  (newVal, oldVal) => {
    // 响应数组变化
  },
  { flush: 'sync' }
)

性能优化策略

Vue3针对数组操作实现了多种优化：

1. 批处理数组变更：连续多个数组操作会被合并为一次更新
2. 惰性响应：只有在实际访问数组元素时才建立响应关联
3. 缓存策略：频繁访问的数组元素会被缓存响应式代理

例如在虚拟滚动场景中，Vue3只会对可视区域内的数组元素建立响应关联：

const visibleItems = computed(() => {
  return largeArray.slice(startIndex, endIndex)
})

与Vue2的差异比较

Vue3的数组响应式处理与Vue2有几个关键区别：

1. Vue3不需要$set方法，直接通过索引修改即可触发响应
2. Vue3能检测到通过arr.length = 0清空数组的操作
3. Vue3对稀疏数组的处理更合理，不会为不存在的索引创建响应

例如在Vue2中需要这样操作数组：

this.$set(this.arr, index, value)

而在Vue3中可以直接：

arr[index] = value

响应式数组的边界情况

某些特殊数组操作需要注意：

1. 交换元素位置：

[arr[0], arr[1]] = [arr[1], arr[0]] // 能触发响应

2. 使用解构赋值：

const [first, ...rest] = arr // 不会建立响应关联

3. 使用Array.from：

const newArr = Array.from(arr) // 新数组不是响应式的

自定义数组响应行为

可以通过自定义ref来实现特殊的数组响应逻辑：

function customArrayRef(initialValue) {
  const value = ref(initialValue)
  return {
    get value() {
      return value.value
    },
    set value(newVal) {
      if (Array.isArray(newVal)) {
        value.value = Object.freeze(newVal) // 示例：冻结数组
      }
    }
  }
}

响应式数组在模板中的使用

模板中对数组的操作有一些特殊行为：

<template>
  <!-- 自动展开ref数组 -->
  <div v-for="item in refArray">{{ item }}</div>
  
  <!-- 直接响应数组方法 -->
  <button @click="array.push(Date.now())">Add</button>
</template>

Vue3编译器会对模板中的数组访问进行特殊处理，确保响应性正常工作。例如v-for="item in array.slice(0,5)"也能保持响应关联。

数组响应式的内部实现细节

Vue3内部通过track和trigger函数管理数组依赖：

function createArrayInstrumentations() {
  const instrumentations = {}
  ;['includes', 'indexOf', 'lastIndexOf'].forEach(key => {
    instrumentations[key] = function(...args) {
      const arr = toRaw(this)
      for (let i = 0, l = this.length; i < l; i++) {
        track(arr, TrackOpTypes.GET, i + '')
      }
      return arr[key](...args)
    }
  })
  return instrumentations
}

这种实现确保搜索类方法也能正确收集依赖。当数组元素变化时，相关的搜索结果的computed值也会更新。