proxy无法直接拦截数组方法调用和部分索引赋值，需结合set拦截属性修改、get劫持可变方法并包装、手动处理length变更及深度代理嵌套对象来实现全面响应式。
Proxy 本身不能直接拦截数组索引赋值（如 arr[0] = 'x'）或数组方法调用（如 push、pop），因为这些操作不触发 set 或 get 拦截器。但可以通过组合拦截器 + 方法重写 + Reflect 机制，实现对数组元素修改的全面捕获。
核心思路：拦截属性访问 + 重写可变方法
数组本质是对象，下标是字符串属性（如 "0"、"1"），所以 arr[0] = x 会触发 set；但 arr.push(x) 是调用原型方法，需在 get 中劫持方法并包装。
- 用
set拦截所有直接索引赋值、长度修改、新增属性（如arr[5] = 'a'或arr.length = 2） - 用
get拦截对数组方法（push、pop、shift、unshift、splice、fill等）的访问，并返回自定义包装函数 - 在包装函数中执行原方法后，主动触发更新逻辑（如通知依赖、刷新视图）
- 对
length属性的修改必须显式处理，否则可能跳过响应式更新
关键代码示例：代理数组并捕获 push/set/splice
以下是一个最小可行实现：
function createReactiveArray(target) {
return new Proxy(target, {
// 拦截 arr[i] = x、arr.length = n、arr.newKey = x
set(target, prop, value, receiver) {
const oldLen = target.length;
const result = Reflect.set(target, prop, value, receiver);
// 若修改了 length 或新增了索引属性，需通知变化
if (prop === 'length') {
console.log(`length 修改为 ${value}，旧长度 ${oldLen}`);
} else if (/^\d+$/.test(prop) && prop >= oldLen) {
console.log(`新增索引 ${prop}，值为`, value);
}
return result;
},
// 拦截方法访问，对可变方法做增强
get(target, prop, receiver) {
const original = target[prop];
// 只包装数组原生可变方法
if (typeof original === 'function' && ['push', 'pop', 'shift', 'unshift', 'splice', 'fill', 'sort'].includes(prop)) {
return function(...args) {
console.log(`调用 ${prop}，参数:`, args);
const result = original.apply(target, args);
// 这里可触发更新（如 dep.notify()）
return result;
};
}
return original;
}
});
}
const arr = createReactiveArray(['a', 'b']);
arr.push('c'); // → 打印日志，且真实插入
arr[2] = 'd'; // → 触发 set，打印新增索引日志
注意嵌套对象与性能边界
Proxy 默认只代理数组本身，不自动代理其内部对象元素（如 arr[0].name = 'x' 不会触发外层数组的响应）。若需深度响应，须在 get 返回对象时递归代理：
- 当
get返回一个对象或数组，检查是否已代理，未代理则用createReactiveArray或createReactiveObject包装后返回 - 避免无限代理：对 Date、RegExp、Element 等原生类型跳过代理
- 大量元素时慎用全量拦截，可考虑节流更新或仅监听关键操作（如只管
push/splice，忽略单个索引赋值）
为什么不能只靠 set？
因为这些操作不走 set：
-
arr.push(x)→ 调用原型方法，不设属性 -
arr.splice(0, 1, y)→ 同上，且内部可能批量改多个索引 -
arr.length = 0→ 走set，但会静默删除所有索引，需手动遍历清理依赖 -
for...of或map不触发任何拦截器，它们只是读取值，不修改结构
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
