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

Posted 2023-02-23

【中文标题】Vue 3 - 如何在没有 .value 的情况下使用反应式 ref 和计算？

【英文标题】：Vue 3 - How to use reactive ref and computed without .value?

【发布时间】：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 的使用完全不同。

【参考方案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!