vue 3 通过 proxy 代理数组并重写 push/pop 等原型方法实现响应式，因原生数组方法不触发 set/get 拦截，需在重写方法中手动调用 trigger 更新依赖，兼顾性能与完整性。
Proxy 本身无法直接拦截数组的 push、pop 等原型方法调用，因为这些方法是定义在 Array.prototype 上的，而 Proxy 拦截的是对象自身的属性访问和操作（如 get、set、apply），对原型链上的方法默认不生效。要实现数组变动时触发视图更新，需结合 apply 拦截 + 方法重写或代理包装。
拦截数组方法的核心思路：用 apply 拦截并劫持原生方法
Proxy 的 apply 拦截器仅对函数对象有效，因此需将数组“伪装”为可被调用的对象（实际不可行），更可行的是——不代理原生数组，而是创建一个代理数组实例，并把 push、pop 等方法显式重写为代理版本。
- 新建一个类（如
ReactiveArray）继承自Array，重写关键变更方法 - 在重写的方法内部手动触发响应式更新（如调用
triggerEffect） - 用 Proxy 包裹该类实例，主要拦截
get/set（用于响应式读取/索引赋值），再配合方法重写完成完整拦截
具体实现：代理数组 + 方法重写
以下是一个轻量级示例（基于 Vue 3 响应式原理简化）：
CPA Update - Secure CLI Proxy API Maintenance
下载
安全更新和维护 CLI Proxy API（CPA）部署与配置。用于 CPA 镜像升级、配置变更、认证目录兼容修复、上线验证与回滚。适用于用户提到“CPA 更新/升级/配置改了/容器重建/回滚”等场景。
function createReactiveArray(raw) {
const proxy = new Proxy(raw, {
get(target, prop, receiver) {
// 拦截 length、索引读取等
if (prop === 'length') return target.length;
if (typeof prop === 'string' && /^\d+$/.test(prop)) {
return Reflect.get(target, prop, receiver);
}
// 拦截 push/pop 等方法调用 → 返回代理后的函数
if (typeof target[prop] === 'function') {
return function(...args) {
const res = target[prop].apply(target, args);
// 触发依赖更新（例如：通知视图重新渲染）
triggerUpdate(); // 你的异步更新逻辑，如 queueJob()
return res;
};
}
return Reflect.get(target, prop, receiver);
}
});
<p>// 额外确保 push/pop 等方法在 proxy 上可调用（避免丢失 this）
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
proxy[method] = function(...args) {
const res = raw[method].apply(raw, args);
triggerUpdate();
return res;
};
});</p><p>return proxy;
}</p><p>function triggerUpdate() {
// 这里放你的异步渲染逻辑，比如：
// Promise.resolve().then(() => render())
}
</p>
为什么不能只靠 Proxy 的 set/get 拦截？
原生数组的 push、pop 不会触发 set 或 get 拦截器，因为它们内部直接修改内部槽位（[[ArrayLength]] 和元素索引），不经过属性赋值流程。例如：
-
arr.push(1)会增加length并设置arr[arr.length - 1]，但这个索引赋值可能绕过 Proxy 的set（尤其在 V8 中对数组有优化） -
arr.pop()会减少length并删除最后一个索引，同样不触发常规set/deleteProperty - 所以必须显式覆盖这些方法，或使用
Object.defineProperty逐个监听索引（不现实），或改用Proxy+Array.from转为普通对象（失去数组特性）
生产环境建议：用成熟响应式库代替手写
手动实现完整、可靠的响应式数组非常复杂（要考虑稀疏数组、负索引、Symbol 方法、迭代器行为等）。实际项目中推荐：
- Vue 3：直接使用
ref([])或reactive([])，其内部已通过createInstrumentationSetter和方法重写处理了数组变更 - Pinia / Zustand：提供更简洁的状态管理，隐藏底层代理细节
- 若需最小化方案，可用
proxy-compare或封装好的@vue/reactivity单独包
