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

Question

我想知道在引用反应对象时如果嵌套深度超过 2 层，那么在何处使用 .value 是正确的。您是否将 .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 放在哪个级别是正确的？

Answer 1

.value 仅在 ref 上使用。 reactive 对象的子属性可以在不使用 .value 的情况下使用，所以你可以直接将它乘以你的 computed prop:

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

demo