当我们使用 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
的使用完全不同在上面的例子中。
最佳答案
您可以使用 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>
关于javascript - Vue 3 - 如何在没有 .value 的情况下使用响应式(Reactive) ref 和计算?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65977470/