Vue3中如何访问reactive响应式对象内部嵌套数组类型属性的值

原因说明 #

你看到的Proxy输出是Vue3响应式系统的正常表现：所有被reactive包裹的对象/数组都会被转为Proxy代理对象，用来实现数据变更的自动监听。基础类型属性比如title不会被Proxy包裹，所以你打印能直接看到值，对象/数组类型的属性打印显示为Proxy，但是这个特性不会影响你正常读写属性，读取逻辑和基础类型完全一致。

取值方法 #

你现有代码里的取值写法本身是正确的，直接按照普通JS对象/数组的操作逻辑使用即可：

• 直接读取数组值：current.room.test[optionIdx] 就能拿到对应下标的对象，要读取对象里的_id属性再加一层即可：current.room.test[optionIdx]._id
• 建议加上可选链语法避免下标越界或数组为空时报错：current.room.test?.[optionIdx]?._id

如果你需要拿到没有被Proxy包裹的原始普通数组，可以使用Vue提供的toRaw方法，示例修改代码如下：

import { defineComponent, reactive, ref, toRaw } from 'vue'

export default defineComponent({
  name: "App",
  setup() {
    const roomId = ref(5);
    const current = reactive({
      room: {_id: 1, title: 'title', test: [{_id: 4}, {_id: 3}]},
    });

    function isButtonDisabled(optionIdx: number) {
      // 拿到原始非响应式数组
      const rawTestArr = toRaw(current.room.test)
      console.log(rawTestArr);
      console.log(rawTestArr[optionIdx]);
      // 此处补充你的按钮禁用判断逻辑即可
      return !rawTestArr[optionIdx]
    }

    return {
      current,
      isButtonDisabled
    };
  },
});

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