Vue3 的响应式系统源码级数组的索引修改与 length 属性处理优化原理

描述：
在 Vue3 的响应式系统中，数组是一个特殊的对象，其索引修改和 length 属性变更会触发响应式更新。但由于数组的使用场景和性能考虑，Vue3 对数组的索引直接设置和 length 修改做了特定的拦截和优化处理。此题目深入分析 Proxy 如何拦截数组的索引赋值（如 arr[0] = 1）和 length 修改，并解释其中依赖收集、触发更新的优化逻辑。

解题过程：

1. 数组响应式的基本原理
   Vue3 使用 Proxy 代理数组对象。当通过 reactive() 创建数组时，会返回一个代理对象，这个代理对象拦截了数组的基本操作，包括 get、set、deleteProperty 等。对于数组来说，set 操作不仅包括对已有索引的修改，还包括新增索引、修改 length 属性。

2. 数组索引修改的拦截

   • 当执行 arr[index] = value 时，Proxy 的 set 拦截器会被触发。
   • 在 set 拦截器中，Vue3 首先检查操作的属性 key 是否为数组的索引（即 typeof key === 'string' && /^\d+$/.test(key)）。
   • 接着判断操作类型：
     a. 如果 key 是数字字符串，且 Number(key) < target.length，表示是修改已有索引的值。
     b. 如果 Number(key) >= target.length，表示是新增索引（相当于修改了数组长度）。
   • 对于情况 (a)，直接修改值，然后触发更新。
   • 对于情况 (b)，除了修改值，还需触发与 length 属性相关的依赖（因为 length 发生了变化）。

3. length 属性修改的拦截

   • 当执行 arr.length = newLength 时，Proxy 的 set 拦截器也会触发，此时 key 为 'length'。
   • Vue3 会对比新旧 length 值：
     a. 如果 newLength < oldLength，表示数组被截断，需要删除多余索引（从 newLength 到 oldLength-1）。
     b. 如果 newLength > oldLength，表示数组扩展，但无需额外处理（因为新增索引尚未赋值）。
   • 对于删除的索引，Vue3 会清理这些索引对应的依赖（避免内存泄漏），并触发与 length 相关的依赖更新。

4. 依赖收集与触发更新的优化

   • Vue3 中，数组的索引和 length 属性都通过 track() 收集依赖。
   • 当修改索引时，除了触发该索引的依赖，还需要触发与 length 相关的依赖吗？
     • 如果索引是新增的（即 key >= target.length），则需要触发 length 依赖，因为 length 隐式改变了。
     • 如果只是修改已有索引，则无需触发 length 依赖，因为 length 未变。
   • 当修改 length 时，触发 length 的依赖，同时对于被删除的索引，也会触发这些索引的依赖（因为值变为 undefined，需要更新视图）。

5. 源码中的关键逻辑

   • 在 packages/reactivity/src/baseHandlers.ts 的 createSetter 函数中，针对数组有特殊处理：

     if (isArray(target) && isIntegerKey(key)) {
         // 对比新旧长度，判断是否新增索引
         const oldLength = target.length
         if (newValue >= oldLength) {
             // 触发 length 依赖
             trigger(target, TriggerOpTypes.ADD, key)
         }
         // 无论新增还是修改，都触发对应索引的依赖
         trigger(target, TriggerOpTypes.SET, key, newValue)
     }
     

   • 对于 length 修改，在 set 拦截器中判断 key === 'length'，并触发 TriggerOpTypes.SET 类型的更新，同时清理被删除索引的依赖。

6. 性能优化点

   • 减少不必要触发：修改已有索引时不触发 length 依赖，避免无意义更新。
   • 批量清理：当 length 减小时，一次性清理所有被删除索引的依赖，避免循环触发。
   • 避免递归代理：数组元素如果是对象，会递归代理，但索引修改时只触发当前层级的依赖，不会深层次遍历（除非显式访问嵌套属性）。

总结：
Vue3 对数组的索引和 length 修改做了精细化的拦截，通过判断操作类型（新增、修改、删除）来精确触发依赖更新，同时优化了依赖清理逻辑，确保了响应式的高效性和正确性。