"If you don't need to access the actual object instance, you can wrap it in a `reactive`"

Question

根据 doc:

If you don't need to access the actual object instance, you can wrap it in a reactive:
nested: reactive({
  count,
})

无法理解这个提示，谁能提供一个真实世界的例子？

Answer 1

我同意提示似乎没有什么意义。

根据引入提示的commit中的变化，我认为它的意思是：

If you don't want to unwrap the value in the template, you can wrap the value in a reactive within setup().

也就是下面的代码：

export default {
  setup() {
    const count = ref(0)
    return {
      nested: {
        count
      }
    }
  }
}

...需要在模板中显式展开：

<template>               
  <div>{{ nested.count.value }}</div>
</template>

但在此处使用 reactive() 围绕嵌套对象：

export default {
  setup() {
    const count = ref(0)
    return {      
      nested: reactive({
        count
      })
    }
  }
}

...允许模板不那么冗长：

<template>
  <div>{{ nested.count }}</div>
</template>

vue.js