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

Question

我正在尝试创建一个可以通过解构和作为 js 对象使用的组件。
解构工作正常，但是对于 js 对象，我不得不写 obj.field.value 而不是 obj.field。这是预期的行为吗？
我正在使用 composition-api plugin.

游乐场：https://jsfiddle.net/3mzve8oy/21/

<div id="app">
  <h2 @click="ctx.fn">{{ ctx.counter }} {{counter}} </h2>
</div>

const { reactive, toRefs } = VueCompositionAPI;

const useCounter = () => {
  const ctx = reactive({
    counter: 2,
    // ...
  });
  
  const fn = () => {
    console.log('Called', ctx.counter);
  }
    
  setInterval(() => ctx.counter += 1, 1000);
  return {...toRefs(ctx), fn};
}

new Vue({
  el: "#app",
  setup() {
    const ctx = useCounter();
    const { counter } = useCounter();
    return { ctx, counter };
  }
})

预期输出：0 0
实际输出：{ "value": 0 } 0

Answer 1

这是我第一次看到 vue-composition-api，但在他们的文档中，他们似乎使用 value 作为对象中的设计选择，以在对象在应用程序周围传递时保持对象的反应性。

看这里： https://v3.vuejs.org/guide/composition-api-introduction.html#setup-component-option

ref takes the argument and returns it wrapped within an object with a value property, which can then be used to access or mutate the value of the reactive variable:*

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

Answer 2

是的，这是预期的行为。请参阅 Ref Unwrapping docs，它描述了您的确切场景：

When a ref is returned as a property on the render context (the object returned from setup()) and accessed in the template, it automatically shallow unwraps the inner value. Only the nested ref will require .value in the template:
<template>
  <div>
    <span>{{ count }}</span>
    <button @click="count ++">Increment count</button>
    <button @click="nested.count.value ++">Nested Increment count</button>
  </div>
</template>

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const count = ref(0)
      return {
        count,

        nested: {
          count
        }
      }
    }
  }
</script>

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

Vue composition API renders {value: 0} instead of plain value for nested field

javascript

vue.js

vuejs3

vue-composition-api