响应式系统核心难题：数组与集合

wuhen_n2026-02-25 11:05

在前面的文章中，我们已经实现了对象类型的响应式代理。但当面对数组、Map、Set 这些特殊的数据结构时，普通的 Proxy 代理会暴露出各种问题：无限递归、方法重写、内部插槽等。本文将深入探讨这些难题，并给出完整的解决方案。

前言：为什么数组和集合是特殊的存在？

当我们用 reactive 包装一个数组时：

javascript 复制代码 
const arr = reactive([1, 2, 3]);
arr.push(4); // 这到底发生了什么？
arr[0] = 100; // 能触发响应式吗？
arr.length = 0; // 又会发生什么？

表面上看，数组和对象都是"引用类型"，用 Proxy 代理应该没什么区别。但实际上，数组有几个让 Proxy 头疼的特性：

  • 索引访问：arr[0] 既是属性访问，又可能改变 length，因此可能触发两次更新。
  • length 属性：改变 length 会隐式删除元素。
  • 变异方法：push、pop 等方法会同时修改数组内容和 length。

更麻烦的是 Map、Set 这类集合，它们的操作方式（set、delete、add）和普通对象完全不同。

数组的特殊性

为什么数组代理会死循环？

让我们先看一个看似完美的数组代理实现：

javascript 复制代码 
const arr = [1, 2, 3];
const proxy = new Proxy(arr, {
  get(target, key) {
    console.log(`读取属性: ${key}`);
    const value = target[key];
    
    // 如果是方法，需要绑定 this
    if (typeof value === 'function') {
      return value.bind(target);
    }
    return value;
  },
  
  set(target, key, value) {
    console.log(`设置属性: ${key} = ${value}`);
    target[key] = value;
    return true;
  }
});

proxy.push(4);

运行这段代码，我们会看到类似这样的输出：

text 复制代码 
读取属性: push
读取属性: length
设置属性: 3 = 4
设置属性: length = 4
读取属性: push
读取属性: length
设置属性: 3 = 4
设置属性: length = 4
... (无限循环)

为什么会死循环？ 关键在于 push 方法的内部机制：

  1. proxy.push → 触发 get，返回数组原生的 push 方法。
  2. push 方法内部会读取 length → 触发 get('length')。
  3. push 方法会设置索引 arr[3] = 4 → 触发 set(3, 4)。
  4. 设置索引后，push 内部会自动更新 length → 触发 set('length', 4)。

那么问题来了：在 set('length') 触发时，数组内部机制会导致重新读取 push 方法的某些元数据，于是又回到步骤 1，形成死循环。

Vue3 的解决方案：重写数组方法

Vue3 采用了巧妙的方式：拦截数组的变异方法，用自定义实现替代原生方法：

javascript 复制代码 
// 需要拦截的数组变异方法
const arrayMethods = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
];

// 保存原生方法
const arrayProto = Array.prototype;
const arrayMethodsProto = Object.create(arrayProto);

// 重写变异方法
arrayMethods.forEach(method => {
  const original = arrayProto[method];
  
  Object.defineProperty(arrayMethodsProto, method, {
    value: function(...args) {
      console.log(`调用变异方法: ${method}`);
      
      // 先调用原生方法
      const result = original.apply(this, args);
      
      // 获取依赖并触发更新
      const dep = this.__ob__?.dep;
      if (dep) {
        dep.notify();
      }
      
      return result;
    },
    enumerable: false,
    writable: true,
    configurable: true
  });
});

深入数组代理的实现

索引访问与 length 的响应式处理

javascript 复制代码 
function createArrayReactive(target) {
  const proxy = new Proxy(target, {
    get(target, key, receiver) {
      // 追踪依赖
      track(target, key);
      
      // 如果是数组的变异方法，返回重写后的版本
      if (arrayMethods.includes(key)) {
        return arrayMethodsProto[key].bind(receiver);
      }
      
      // 其他属性正常返回
      const value = Reflect.get(target, key, receiver);
      
      // 如果是对象，需要递归响应式
      if (isObject(value)) {
        return reactive(value);
      }
      
      return value;
    },
    
    set(target, key, value, receiver) {
      const oldLength = target.length;
      const oldValue = target[key];
      
      // 设置值
      const result = Reflect.set(target, key, value, receiver);
      
      // 判断是否需要触发更新
      if (target.length !== oldLength) {
        // length 属性改变，需要触发 length 的更新
        trigger(target, 'length');
      }
      
      if (key !== 'length' && oldValue !== value) {
        // 普通索引变化
        trigger(target, key);
      }
      
      return result;
    }
  });
  
  return proxy;
}

追踪数组变化的关键点

数组的响应式追踪有三个核心：

  1. 追踪索引访问：arr[0] = 100; 触发 set(0, 100);
  2. 追踪 length 变化：arr.length = 0; 触发 set('length', 0);
  3. 追踪变异方法：arr.push(4); 触发 push 方法拦截

数组代理的完整实现

javascript 复制代码 
class ArrayReactiveHandler {
  constructor(_isShallow = false) {
    this._isShallow = _isShallow;
  }
  
  get(target, key, receiver) {
    // 追踪依赖
    track(target, key);
    
    // 处理数组变异方法
    if (arrayMethods.includes(key)) {
      return arrayMethodsProto[key].bind(receiver);
    }
    
    const value = Reflect.get(target, key, receiver);
    
    // 浅响应式不需要递归
    if (this._isShallow) {
      return value;
    }
    
    // 嵌套对象需要转为响应式
    if (isObject(value)) {
      return reactive(value);
    }
    
    return value;
  }
  
  set(target, key, value, receiver) {
    const oldLength = target.length;
    const oldValue = target[key];
    const keyIsArrayIndex = isArrayIndex(key);
    
    // 设置值
    const result = Reflect.set(target, key, value, receiver);
    
    // 判断触发更新的类型
    if (key === 'length') {
      // length 直接变化
      trigger(target, 'length');
    } else if (keyIsArrayIndex) {
      // 索引变化可能影响 length
      if (oldValue !== value) {
        trigger(target, key);
      }
      
      if (target.length !== oldLength) {
        trigger(target, 'length');
      }
    } else {
      // 普通属性
      if (oldValue !== value) {
        trigger(target, key);
      }
    }
    
    return result;
  }
  
  deleteProperty(target, key) {
    const hadKey = key in target;
    const oldLength = target.length;
    
    const result = Reflect.deleteProperty(target, key);
    
    if (result && hadKey) {
      trigger(target, key);
      
      // 删除索引可能改变 length
      if (isArrayIndex(key) && target.length !== oldLength) {
        trigger(target, 'length');
      }
    }
    
    return result;
  }
}

// 判断是否为数组索引
function isArrayIndex(key) {
  const keyAsNumber = Number(key);
  return Number.isInteger(keyAsNumber) && 
     keyAsNumber >= 0 && 
     keyAsNumber < Number.MAX_SAFE_INTEGER;
}

Map 和 Set 的代理

为什么 Map/Set 需要特殊处理？

Map 和 Set 的操作方式与普通对象完全不同：

javascript 复制代码 
const map = new Map();
map.set('key', 'value'); // 不是通过属性赋值
map.get('key'); // 不是通过属性读取
map.delete('key'); // 不是通过 delete 操作符

普通的 Proxy 无法拦截这些方法调用，我们必须重写这些方法。

拦截集合方法的思路

Vue3 通过创建自定义的集合处理器，重写所有会修改集合的方法：

javascript 复制代码 
// 需要拦截的 Map/Set 方法
const mutableInstrumentations = {
  // 取值方法
  get(key) {
    const target = this.__target;
    const hadKey = target.has(key);
    
    // 追踪依赖
    track(target, key);
    
    if (hadKey) {
      const value = target.get(key);
      // 嵌套对象响应式
      return isObject(value) ? reactive(value) : value;
    }
  },
  
  // 设值方法
  set(key, value) {
    const target = this.__target;
    const hadKey = target.has(key);
    const oldValue = target.get(key);
    
    // 设置值
    target.set(key, value);
    
    // 触发更新
    if (!hadKey) {
      trigger(target, 'add', key);
    } else if (oldValue !== value) {
      trigger(target, 'set', key);
    }
    
    return this;
  },
  
  // 添加方法（Set专用）
  add(value) {
    const target = this.__target;
    const hadKey = target.has(value);
    
    target.add(value);
    
    if (!hadKey) {
      trigger(target, 'add', value);
    }
    
    return this;
  },
  
  // 删除方法
  delete(key) {
    const target = this.__target;
    const hadKey = target.has(key);
    
    const result = target.delete(key);
    
    if (hadKey) {
      trigger(target, 'delete', key);
    }
    
    return result;
  },
  
  // 清空方法
  clear() {
    const target = this.__target;
    const hadItems = target.size > 0;
    
    const result = target.clear();
    
    if (hadItems) {
      trigger(target, 'clear');
    }
    
    return result;
  }
};

源码对标：Vue3 的 collectionHandlers

Vue3 源码中的 collectionHandlers.ts 实现了完整的集合代理逻辑。其核心思想是：

javascript 复制代码 
// 创建集合代理
function createCollectionHandler(isReadonly = false, isShallow = false) {
  return {
    get(target, key, receiver) {
      // 拦截 size 属性
      if (key === 'size') {
        track(target, 'size');
        return Reflect.get(target, key, target);
      }
      
      // 返回重写的方法
      if (key in mutableInstrumentations) {
        return mutableInstrumentations[key];
      }
      
      // 其他方法（如 keys、values 等）
      return Reflect.get(target, key, target);
    }
  };
}

实战：解决数组代理的无限递归

问题复现

让我们重现一个真实的无限递归场景：

javascript 复制代码 
// 问题代码
const arr = reactive([1, 2, 3]);

arr.push(4); // 死循环！

// 另一个容易忽略的场景
arr.splice(0, 1); // 也可能死循环

解决方案：标记和缓存

Vue3 的解决方案是结合标记 和缓存：

javascript 复制代码 
// 防止重复拦截
function createArrayProxy(arr) {
  // 如果已经是响应式数组，直接返回
  if (arr.__v_isReactive) {
    return arr;
  }
  
  const proxy = new Proxy(arr, {
    get(target, key, receiver) {
      // 标记代理，防止重复代理
      if (key === '__v_isReactive') {
        return true;
      }
      
      // 关键优化：缓存方法调用结果
      if (arrayMethods.includes(key)) {
        // 使用 weakMap 缓存绑定后的方法
        if (!cachedMethods.has(key)) {
          const method = arrayMethodsProto[key];
          cachedMethods.set(key, method.bind(receiver));
        }
        return cachedMethods.get(key);
      }
      
      // ... 其他逻辑
    },
    
    set(target, key, value, receiver) {
      // 添加守卫条件，避免递归
      if (key === '__v_isReactive') {
        return false;
      }
      
      // ... 设置逻辑
    }
  });
  
  return proxy;
}

最终实现：安全的数组代理

结合所有优化，最终的数组代理实现：

javascript 复制代码 
class ArrayHandler {
  constructor(isReadonly = false, isShallow = false) {
    this.isReadonly = isReadonly;
    this.isShallow = isShallow;
    // 方法缓存
    this.methodCache = new Map();
  }
  
  get(target, key, receiver) {
    // 跳过内部标记
    if (key === '__v_isReactive' || key === '__v_isReadonly') {
      return this.isReadonly ? false : true;
    }
    
    // 追踪依赖
    if (!this.isReadonly && typeof key !== 'symbol') {
      track(target, key);
    }
    
    // 处理数组方法
    if (arrayMethods.includes(key)) {
      let method = this.methodCache.get(key);
      if (!method) {
        method = arrayMethodsProto[key].bind(receiver);
        this.methodCache.set(key, method);
      }
      return method;
    }
    
    const value = Reflect.get(target, key, receiver);
    
    // 嵌套响应式
    if (!this.isShallow && isObject(value)) {
      return this.isReadonly ? readonly(value) : reactive(value);
    }
    
    return value;
  }
  
  set(target, key, value, receiver) {
    if (this.isReadonly) {
      console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`);
      return true;
    }
    
    const oldLength = target.length;
    const oldValue = target[key];
    const keyIsArrayIndex = isArrayIndex(key);
    
    const result = Reflect.set(target, key, value, receiver);
    
    // 触发更新
    if (target.length !== oldLength) {
      trigger(target, 'length');
    }
    
    if (key !== 'length' && oldValue !== value) {
      trigger(target, key);
    }
    
    return result;
  }
}

// 工厂函数
function reactiveArray(arr) {
  if (!Array.isArray(arr)) {
    return arr;
  }
  
  // 避免重复代理
  if (arr.__v_isReactive) {
    return arr;
  }
  
  return new Proxy(arr, new ArrayHandler());
}

性能优化与最佳实践

避免不必要的数组代理开销

javascript 复制代码 
// 不推荐：大数组频繁操作
const bigArray = reactive(new Array(10000).fill(0));
for (let i = 0; i < bigArray.length; i++) {
  bigArray[i] = i; // 触发 10000 次 set
}

// 推荐：批量更新
const bigArray = reactive(new Array(10000).fill(0));
// 使用 splice 一次更新
bigArray.splice(0, bigArray.length, ...new Array(10000).fill(0));

集合类型的使用建议

javascript 复制代码 
// Map 的响应式使用
const map = reactive(new Map());

// 正确：使用 set 方法
map.set('key', 'value');

// 错误：直接赋值属性
map.key = 'value'; // 不会触发响应式

// Set 的响应式使用
const set = reactive(new Set());

// 正确：使用 add
set.add('item');

// 错误：不会触发响应式
set[0] = 'item';

结语

数组和集合的响应式实现是 Vue3 中最复杂但也最精巧的部分。通过本文的深入分析，我们不仅理解了 Vue3 如何解决这些技术难题，更重要的是学会了如何避免在实际开发中踩坑。这些知识将帮助你在构建复杂应用时，能够更加得心应手地处理各种数据结构的响应式需求。

对于文章中错误的地方或有任何疑问，欢迎在评论区留言讨论！

相关推荐
We་ct2 小时前
LeetCode 199. 二叉树的右视图：层序遍历解题详解
前端·算法·leetcode·typescript·广度优先
晴殇i2 小时前
深入浅出 XSS：原理、危害与全方位防御指南
前端·面试
前端 贾公子2 小时前
CSS 系统颜色和暗黑模式的关系及意义
前端·javascript·vue.js·html
李剑一2 小时前
百度搜索怎样屏蔽某SDN
前端
PieroPc2 小时前
HTML5 Canvas 平台跳跃游戏
前端·游戏·html5
Qinana2 小时前
解构 LangChain Tool Calling：从 Schema 定义到 Agent 执行循环的深度解析
前端·javascript·node.js
YukiMori232 小时前
深入理解 JavaScript 执行机制：事件循环、执行栈、同步与异步彻底搞懂
前端·javascript·面试
计算机学姐2 小时前
基于SpringBoot的服装购物商城销售系统【协同过滤推荐算法+数据可视化统计】
java·vue.js·spring boot·mysql·信息可视化·mybatis·推荐算法
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03AI Agent 平台横评：ZeroClaw vs OpenClaw vs Nanobot04【OpenClaw 本地实战 Ep.3】突破瓶颈：强制修改 openclaw.json 解锁 32k 上下文记忆05Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤06OpenClaw 安装之（三）DeepSeek模型接入配置和详细配置参数07AI agent：介绍 ZeroClaw 安装，使用08OpenClaw 使用和管理 MCP 完全指南09AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南10配置 OpenClaw 使用 Ollama 本地模型