关于vue3proxy对象无法进行常规操作的问题

声名变量

const optionsCategory = ref([]);

请求接口拿到数据

function getOptionsCategory() {
  let params = {
    pageNo: 1,
    pageSize: 500,
  };
  API.xxx(params).then((res) => {
    if (res.code === 0) {
    optionsCategory.value = removeChildren(res.payload);
    }
  });
}

操作

如果后期要对这个数据进行操作 直接mapp什么的数组方法是无效的,要像下面这样转换

JSON.parse(JSON.stringify(optionsCategory.value))

reactive内数组操作

const state = reactive({
    list: [1, 2, 3, 4, 5, 6, 7],
})

function test(){
  let res = state.list.map((v) => {
    return {
      a:v*v
    }
  })
  console.log(res)
}

const state = reactive(
    [1, 2, 3, 4, 5, 6, 7],
)

function test(){
  let res = state.map((v) => {
    return {
      a:v*v
    }
  })
  console.log(res)
}

直接声明的数组和ref注册的数组

const arr2 = [
  { label: '111', value: 1 },
  { label: '222', value: 0 },
];
const arr = ref([{a:1,b:2},{a:1,b:2},{a:1,b:2},{a:1,b:2},])
let res = arr.value.forEach((v) => {
    console.log(v);
  })
  
  //实际测试是arr能返回 但是arr2直接不能读到forEach方法