单文件组件中使用 queries 请求返回的数据需要通过 .value 获取

[lzj97]

Bug 描述 Bug description

在vue单文件组件中使用 queries 请求返回的数据需要通过 .value 获取

    <span v-if="queries[i.id]?.loading.value">loading...</span>
    <span v-else> {{ queries[i.id]?.data.value }}</span>

代码重现 Reproduce

https://codesandbox.io/s/awesome-easley-nwydw?file=/src/App.vue

期望结果 Desired result

能直接通过queries[id].loading 、 queries[id].data 获取数据

其他信息 Other information

[John60676]

Vue 在此次更新后[vuejs/core#1682]，setup()返回对象的 template 自动 ref unwrapping 现在只应用于根级别的ref。因此，当直接通过 queries[id].loading 获取数据的话，Vue 并没有对此进行 auto unwrapping，当初这样设计其实是为了保证 queries[id].data 里面的数据获取方式与 data 的取值方式在 JSX 中保持一致。但是忽略了 SFC 里面的情况。

解决方法是把 queries 变成 reactive，这样在 SFC 里面就能正确的 auto unwrapping，但是 JSX 里面使用的话，还是会出现取值方式不一致的情况。

@benny-eu 你怎么看

[John60676]

fix in beta.10