Javascript Vue组合API为嵌套字段呈现{value:0}而不是普通值

我正在尝试创建一个组件，该组件可以通过解构和js对象使用。
解构工作得很好，但是对于js对象，我不得不编写

obj.field.value

，而不仅仅是

obj.field

。这是预期行为吗？
我正在使用

游乐场：

{{ctx.counter}}{{counter}}

const{reactive，toRefs}=VueCompositionAPI；
常量useCounter=（）=>{
常数ctx=无功({
柜台:2,，
// ...
});
常数fn=（）=>{
console.log（'Called'，ctx.counter）；
}
setInterval（（）=>ctx.counter+=11000）；
返回{…toRefs（ctx），fn}；
}
新Vue({
el:“应用程序”，
设置（）{
const ctx=useCounter（）；
常量{counter}=useCounter（）；
返回{ctx，counter}；
}
})

预期输出：

0 0

---

实际输出：

{“value”：0}0

这是我第一次看到

vue composition api

，但在他们的文档中，他们似乎使用

value

作为对象的设计选择，以在对象在应用程序中传递时保持对象的反应性

请看这里：

ref接受参数并返回包装在具有value属性的对象中的参数，然后可以使用该属性访问或修改被动变量的值：*

---

是的，这是预期的行为。请参阅，其中描述了您的确切场景：

当ref作为渲染上下文（从中返回的对象）上的属性返回并在模板中访问时，它会自动展开内部值。模板中只有嵌套的ref需要

.value

：

{{count}}
增量计数
嵌套增量计数
从“vue”导入{ref}
导出默认值{
设置（）{
常数计数=ref（0）
返回{
计数
嵌套的：{
计数
}
}
}
}

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1