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

Question

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

例如：

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

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

是否有可能通过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://cdnjs.cloudflare.com/ajax/libs/vue/3.4.7/vue.global.min.js"></script>

Answer 2

如果您真的不喜欢将 .value 与 ref 一起使用，您可能会对反应性转换编译器宏感兴趣。

2023 年更新：反应性转换功能不会作为核心功能添加到 Vue 3 中。相反，使用 Vue Macros 库添加该功能。https://vue-macros.sxzz.moe/features/reactivity-transform.html

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

vite.config.js

import { defineConfig } from 'vite'
import ReactivityTransform from '@vue-macros/reactivity-transform/vite'

export default defineConfig({
  plugins: [ReactivityTransform()],
})