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

【问题标题】：How to use .value on reactive nested objects in Vue 3's Composition API?如何在 Vue 3 的 Composition API 中对反应性嵌套对象使用 .value？
【发布时间】：2020-09-09 12:06:58
【问题描述】：

我想知道在引用反应性对象时使用.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.js vuejs3 vue-composition-api

【解决方案1】：

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

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

demo

【讨论】：