Vue 3 - 如何使用反应式引用并在没有 .value 的情况下进行计算？

当我们使用选项 API https://v3.vuejs.org/api/options-api.html，我们可以在中定义一些属性computed部分和一些属性data部分。所有这些都可以通过实例从实例访问this引用，即在同一个对象中。非常适合。

例如：

if (this.hasMore) {
   this.loading = true;
   ...
}

Where hasMore是一个计算属性，loading是一种反应性质。

有没有可能通过做类似的事情合成API https://v3.vuejs.org/api/composition-api.html？例如，要实现类似的代码，但是在哪里pagination是一个简单的对象，而不是组件的链接，例如：

if (pagination.hasMore) {
   pagination.loading = true;
   ...
}

The computed https://v3.vuejs.org/api/computed-watch-api.html#computed根本不是解决方案，因为它会返回ref它的使用将与使用完全不同this在上面的例子中。

你可以使用reactive具有计算属性的对象。然后一切都可以按照您想要的方式访问：

const pagination = reactive({
  loading: false,
  hasMore: computed(() => {
    return true;
  })
})

Demo:

const { createApp, reactive, computed } = Vue;
const app = createApp({
  setup() {
    const pagination = reactive({
      loading: false,
      hasMore: computed(() => {
        return true;
      })
    })
    if (pagination.hasMore) {
      pagination.loading = true;
    }
    return {
      pagination
    }
  }
});
app.mount("#app");

<div id="app">
  {{ pagination }}
</div>

<script src="https://unpkg.com/vue@next"></script>