Vue中computed内响应式变量的Proxy Handler为何存在差异？

问题背景 #

我正在开发Vue.js项目，其中ListDataList是一个计算属性，依赖响应式数据store.getters['management/banners']——当该数据变化时，计算属性会重新执行内部逻辑。

原代码的嵌套赋值问题 #

计算属性多次触发执行时，for循环内给list[index].url赋值对象的代码会重复执行，导致list[index].url被嵌套赋值（原本是字符串类型的url，第一次执行后变为对象，第二次执行又把这个对象作为值再次包装成新对象）。

排查发现的Handler差异现象 #

list是响应式的Proxy对象，存在两种不同的Handler表现：

• 当Proxy的Handler为MutableReactiveHandler时，会出现上述嵌套赋值问题
• 当Proxy的Handler为普通Object时，即便计算属性多次执行，也不会出现嵌套赋值问题

同一代码在不同电脑上运行时，部分电脑的Handler是MutableReactiveHandler，另一部分则是普通Object。

原计算属性代码：

const ListDataList = computed(() => {
    const list = changeStatusVal(store.getters['management/banners']);

    for (let index = 0; index < list.length; index++) {
        list[index] = {
            ...list[index],
            button: { name: t('board.modify'), id: 'goEdit', val: list[index].idx },
            button1: { name: t('board.delete'), id: 'delete', val: list[index].idx },
        };

        list[index].url = {
            type: 'link',
            id: 'image',
            name: list[index].url,
            val: list[index].url,
        };
    }
    return list;
});

已解决的方案 #

通过添加类型判断条件，避免重复赋值，解决了嵌套问题，但仍不清楚Handler属性差异的原因：

const ListDataList = computed(() => {
  const list = changeStatusVal(store.getters['management/banners']);

  for (let index = 0; index < list.length; index++) {
    list[index] = {
      ...list[index],
      button: { name: t('board.modify'), id: 'goEdit', val: list[index].idx },
      button1: { name: t('board.delete'), id: 'delete', val: list[index].idx },
    };

    if (typeof list[index].url === 'string') {
      list[index].url = {
        type: 'link',
        id: 'image',
        name: list[index].url,
        val: list[index].url,
      };
    }
  }
  return list;
});

核心疑问 #

为什么相同代码中，同一个list变量的Proxy Handler属性会存在差异？

内容的提问来源于stack exchange，提问作者YongHyun Kim