Vue 3 - 如何在没有 .value 的情况下使用反应式 ref 和计算？答案

【问题标题】：Vue 3 - How to use reactive ref and computed without .value?Vue 3 - 如何在没有 .value 的情况下使用反应式 ref 和计算？
【发布时间】：2021-05-04 17:31:45
【问题描述】：

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

例如：

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

hasMore 是计算属性，loading 是反应属性。

有没有可能通过Composition API 做类似的事情？例如，要实现类似的代码，但其中pagination 是一个简单对象，而不是组件的链接，例如：

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

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

【问题讨论】：

标签： javascript vue.js vue-component vuejs3 vue-composition-api

【解决方案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>

【讨论】：

【解决方案2】：

如果您真的不喜欢将 .value 与 ref 一起使用，您可能会对提议的 Reactivity Transform 提案感兴趣，该提案将允许您在不使用 .value 的情况下使用 ref。关注这里的讨论：https://github.com/vuejs/rfcs/discussions/369

// declaring a reactive variable backed by an underlying ref
let count = $ref(1)
console.log(count); //no .value needed!

【讨论】：