最近在编程时，遇到了 vue3 数组更新却没有响应的问题，解决后，决定把对这次的问题总结记录下来。

代码重现

项目的代码太复杂了，我做了一个超精简版本的重现代码：

添加

item-service 代码：

// 条目列表缓存对象let _items: string[] | undefined = undefinedtype Listener = (items: string[]) => voidconst listeners: Array = []export async function getItems(): Promise { if (_items) { return _items } // 从服务器请求数据 _items = await doAjax() return _items}export async function addItem(item: string) { const items = await getItems() items.push(item) listeners.forEach(listener => listener(items))}export async function onItemsChange(listener: Listener) { listeners.push(listener)}

item-service 中缓存了列表对象，然后组件中一直使用 item-service 中缓存的这个列表给 data 赋值，问题就出在这。

程序调试

vue3 的响应式是通过 Proxy 实现的，我在 onItemsChange 回调时做了调试，下面是 Proxy handler 的 set 方法的调试过程。为了方便查看，调试中没有被执行到的代码都注释掉了，并且加了一些说明。

// 注释掉的代码都是调试过程中没有被执行的代码function set(target, key, value, receiver) { // 代理 handler 的 set 方法参数说明： // target 原始对象，getItems() 返回的 list // key 属性名称，‘list’ // value 要设置的值，onItemsChange 回调的 list 对象 // receiver 最初被调用的对象,通常是 proxy 本身，这里就是 data.list， list的代理对象 let oldValue = target[key]; // 使用 shallowReactive 的情况下 shallow 标记是 true ，这里是 false if (!shallow && !isReadonly(value)) { value = toRaw(value); oldValue = toRaw(oldValue); // export const isArray = Array.isArray // !isArray(target) 返回 false if (!isArray(target) && isRef(oldValue) && !isRef(value)) { // oldValue.value = value; // return true; } } const hadKey = isArray(target) && isIntegerKey(key) // isIntegerKey(key) 返回 false，下行不执行 // ? Number(key) !Object.is(value, oldValue) // value 和 oldValue 是同一个 list 数组对象, hasChanged 返回 false // trigger(target, “set” /* SET */, key, value, oldValue); } } return result;}

可以看到没有触发任何更新，因此没有响应。