javascript Vue 3 -如何使用无功参考并在没有值的情况下计算？

sdnqo3pr 于 2023-01-29 发布在 Java

关注(0)|答案(2)|浏览(337)

当我们使用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的用法完全不同。

JavaScript

来源：https://stackoverflow.com/questions/65977470/vue-3-how-to-use-reactive-ref-and-computed-without-value

2条答案

按热度按时间

a9wyjsp71#

如果你真的不喜欢在ref中使用.value，你可能会对Reactivity Transform的提议感兴趣，它允许你在没有. value的情况下使用ref。https://github.com/vuejs/rfcs/discussions/369
2023年更新：React性转换功能不会作为核心功能添加到Vue 3中。相反，使用Vue宏库添加该功能。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 vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue({ reactivityTransform: true })]
})

赞(0）回复(0）举报 2023-01-29

lawou6xi2#

你可以使用一个reactive对象，它有一个计算属性，然后你就可以用你想要的方式访问它了：

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

演示：
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-01-29

我来回答

javascript Vue 3 -如何使用无功参考并在没有值的情况下计算？

2条答案

相关问题

热门标签

最新问答