javascript - Vue 3 - 如何在没有 .value 的情况下使用响应式(Reactive) ref 和计算？

Question

当我们使用 Options API ，我们可以在 computed 中定义一些属性data 中的部分和一些属性部分。所有这些都可以通过 this 从实例访问。引用，即在同一个对象中。非常适合。
例如:

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

在哪里 hasMore是一个计算属性， loading是一个 react 属性。
有没有可能通过 Composition API 做类似的事情？ ?例如，要实现类似的代码，但其中 pagination是一个简单的对象，而不是组件的链接，例如:

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

computed 根本不是解决方案，因为它返回 ref它的使用将与 this 的使用完全不同在上面的例子中。

Answer 1

您可以使用 reactive具有计算属性的对象。然后它就可以按照你想要的方式访问:

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

演示:

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>