Vue3 当ref的值为对象时

之前在项目中使用ref去声明响应式变量时，用的都是布尔、字符串等简单类型的变量，今天在项目中要动态将一些对象赋值给ref对象，却发现大有不同

import { defineComponent, ref,  toRaw  } from 'vue'
const currentUI = ref({})

/*组件内template中会将一个对象赋值给currentUI*/
/*
{
  ui_id:123,
  type: 0,
  layout: [[0, 50, 0, 100], [50, 100, 0, 100]]
}
*/
const handleChange = () => {
  console.log(currentUI)  //为了对比多打印出一条
  console.log(currentUI.value)
}

在我的预想中，控制台也应该打印出我想要的对象，但结果却出乎我意料

console.png

明明是ref对象，通过.value按理说应该能够输出他该有的值，但却得到一个proxy对象。

去看看vue官方文档，是这么介绍的：如果将对象分配为 ref 值，则通过 [reactive](https://v3.cn.vuejs.org/api/basic-reactivity.html#reactive) 函数使该对象具有高度的响应式。

所以将对象赋值给ref函数是，实际上用的还是reactive啊

我参考了一些方法，最终是借助vue3中的toRaw()方法去获取我想要的值的。

const changeUI = (val) => {
  console.log(toRaw(currentUI.value))
}

这其中的知识点，还是得找时间去细看才行啊。