vue.js - 如何在 Vue 3 的 Composition API 中对反应性嵌套对象使用 .value？

Question

我想知道在.value引用反应性对象时，如果它们嵌套了 2+ 层深，那么在哪里使用是正确的。您是否放置.value了基础对象，然后访问该基础对象的子键？还是你把它放在最深的钥匙上？

这是一个例子：

import { reactive, computed } from 'vue'

const someObj = reactive({
    a: {
        b: {
            c: 1
        }
    }
})

const doubleSomeObj = computed(() => {
    return someObj.value.a.b.c * 2
    // Or... someObj.a.b.c.value * 2
    // Or something else?
})

在上面的代码中，在计算属性doubleSomeObj中，它引用了嵌套对象someObj。

当引用该嵌套对象中的各种键时someObj，放置在哪个级别是正确的.value？

标签： vue.jsvuejs3vue-composition-api

Answer 1

.value仅用于refs。该reactive对象的子属性可以在不使用的情况下使用.value，因此您可以直接将其乘以您的computed道具：

const doubleSomeObj = computed(() => {
    return someObj.a.b.c * 2
})

演示